Anne van Kesteren

Paintr 2.1 Beta

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.


  1. This tool would be more useful if you would allow IMG elements in your comments, or at least links to data: URLs.

    Posted by Sjoerd Visscher at

  2. Well, that has some nasty security implications, although for links it’s not that more harmful than allowing links in general I suppose.

    Posted by Anne van Kesteren at

  3. The save button seems to work well in Firefox 2 beta 1. No need to start opera 9 ;)

    Posted by Jan de Mooij at

  4. Relevant Firefox bugs tracking toDataURL (now both RESOLVED FIXED): bug 291218, bug 336331.

    Posted by Mark at

  5. Maybe you can only allow images with data: URLs?

    Posted by Sjoerd Visscher at

  6. Sjoerd, and what happens when browsers start supporting SVG as image? And what happens with my layout?

    Posted by Anne van Kesteren at

  7. 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.)

    Posted by Sjoerd Visscher at

  8. 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?

    Posted by Mark at

  9. 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).

    Posted by Steve Clay at

  10. All functionality, including saving, works great for me in the latest Firefox trunk nightly.

    Posted by Alex at

  11. I'd like to see cursor: crosshair for more precision.

    Posted by blaise at

  12. 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.

    Posted by SirPavlova at

  13. Perhaps I should have an explicit call to closePath() on a mouseout. Not sure what’s the best solution.

    Posted by Anne van Kesteren at

  14. 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:

    Posted by Jens Anders Bakke at

  15. I have to correct myself there.
    No need for getAttribute() on width and height.

    Suggested alternative:

    Posted by Jens Anders Bakke at

  16. Well, it becomes terribly slow after more than 150 lines drawn in an open path, in Opera.

    Posted by Joao Eiras at