Paintr 2.1 Beta is the successor of Paintr 2.0 Beta and uses better coding techniques. Sjoerd told me it was better to use a flag instead of invoking addEventListener from within an event listener so I introduced drawState. Besides that I included the Firefox fix from Sylvain, but using Opera 9 is still recommended given that Firefox doesn’t allow you to save houses and such. You can also mouseout (and go back) freely now. When you hold the mouse down inside the canvas you can start to draw and when you release it (anywhere on the screen) drawing stops. Movements are only detected within the canvas, obviously.
This tool would be more useful if you would allow IMG elements in your comments, or at least links to data: URLs.
Well, that has some nasty security implications, although for links it’s not that more harmful than allowing links in general I suppose.
The save button seems to work well in Firefox 2 beta 1. No need to start opera 9 ;)
Relevant Firefox bugs tracking toDataURL (now both RESOLVED FIXED): bug 291218, bug 336331.
Maybe you can only allow images with data: URLs?
Sjoerd, and what happens when browsers start supporting SVG as image? And what happens with my layout?
Only allow data:image/png;base64, images then. Maybe max-width and max-height can save your layout?
Or even better: add Paintr to your comments form! (Only in browsers that support canvas and toDataURL of course.)
This is probably some nitpicking, but how come that fast drawing (or writing) will cause skips, where the line doesn't follow the pointer but takes some shortcuts (i.e. drawing a circle would result in a rectangle)? Is it Opera's Javascript engine, it's canvas implementation, or something with the script?
Here are some feature ideas for you: Artist's Sketchbook. Speaking of Canvas, since I introduced Opera 9 to a coworker he's since used it to complete a tablet PC project where a hospital patient writes to a nurse (via canvas) and his stroke is recorded and can be played back in real-time. Bonus: if the patient prefers, they can use buttons to speak for them (spoken via XHTML+Voice).
All functionality, including saving, works great for me in the latest Firefox trunk nightly.
I'd like to see cursor: crosshair for more precision.
Mark, the skipping is because Paintr draws the circle by joining the last mouse position to the new one by a straight line, whenever movement is detected. So I guess you could blame the script, but every other paint program does it the same way. It's probably Opera's JavaScript engine not refreshing the mouse position often enough (though that could also be your OS).
Another side effect of this is that if you click at the middle of the canvas, drag out one side, circle around & come in at any other side, you'll get a line from your exit point to where you came back in.
Perhaps I should have an explicit call to closePath() on a mouseout. Not sure what’s the best solution.
Very nice indeed! :) Great work!
Good to so see a simple and clear example on using <canvas>.
I am wondering if there's a reason why you're using fillRect() over clearRect() in clearPaintr().
The advantage I see with using clearRect(), is that you actually clear the canvas. Leaving the canvas transparent and able to show css backgrounds on the canvas or parent elements.
Is there any hidden advantage with using fillRect()?
Or a disadvantage with using clearRect()?
Suggested alternative:
this.getContext('2d').clearRect(0,0,this.getAttribute("width"),this.getAttribute("height"));
I have to correct myself there.
No need for getAttribute() on width and height.
Suggested alternative:
this.getContext('2d').clearRect(0,0,this.width,this.height);
Well, it becomes terribly slow after more than 150 lines drawn in an open path, in Opera.
http://my.opera.com/community/forums/topic.dml?id=161210
