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
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
Sjoerd, and what happens when browsers start supporting SVG as image? And what happens with my layout?
data:image/png;base64, images then. Maybe
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.)
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.
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
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
Or a disadvantage with using
I have to correct myself there.
No need for
getAttribute() on width and height.
Well, it becomes terribly slow after more than 150 lines drawn in an open path, in Opera.