Anne van Kesteren: Weblog 4.2

Weblog on W3C, WHATWG, HTML, CSS, DOM, XML, HTTP and more.

Sunday project: Paintr 2.0

I finally created my own Web 2.0 application. This is different from Web 2 applications, which are classified “pipedream” and not “beta.” Thanks to the Web2.0V2Logo Creatr Beta it has a logo too:

Paintr 2.0 Beta

Thanks to browser incompatibilities it only works in Opera 9 and secret internal builds at the moment. Perhaps it also works in Firefox 3, I haven’t tried. Anyway, Paintr 2.0 Beta is here for all your drawings, although I guess it’s more useful for sites accepting digital autographs, such as TransIP. (They are excellent. The only downside is their name; I keep forgetting it.)

I would appreciate feedback on my scripting style. What the best way of doing things is in ECMAScript is not always clear to me.

27th August 2006

Browse through posts: ← main → .

Comments

  1. Who need canvas? :P (very very alpha)

    Permalink · 2006-08-27 21:04:31 · Tino Zijdel

  2. Apparently the problem is that Gecko doesn't support event.offsetX. The coordinate-related DOM is a mess.

    (Did I need to start the comment with xhtml doctype?)

    Permalink · 2006-08-27 23:44:25 · Nickolay Ponomarev

  3. The Gecko bug is 69787.

    I've put a modified version there with some changes for computing the position of the canvas and then using clientX/Y. Hopefully, 174397 should make things easier.

    I changed the CSS because having a margin on the html element has no effect on the offsetLeft property of the body. I first thought it was a bug, but Opera behaves the same way, so I guess it's a design choice ;-).

    Permalink · 2006-08-27 23:57:01 · Sylvain

  4. I think the easiest way to get it to work in firefox is using position:relative on the canvas element, and event.layerX/layerY instead of event.offsetX/offsetY.

    Permalink · 2006-08-28 09:10:56 · Jan de Mooij

  5. Quite nice! I would suggest you to add this as Opera widget, even though we have much more advanced painter. ;)

    Permalink · 2006-08-28 16:00:54 · FataL

  6. Anne this is uber cool. Can't live without it. Bye Bye MS Paint.

    Permalink · 2006-08-28 16:58:18 · olli

  7. This app is great! I dumped photoshop to use this superior design studio instead! I even designed a house with it!

    Permalink · 2006-08-28 17:01:45 · Huib

  8. Jan de Mooij: Thanks for the tip, how could I have missed that ;-). Now the changes are much smaller.

    Anne, feel free to apply the patch if you want Gecko compatibility.

    Permalink · 2006-08-28 21:23:37 · Sylvain

Leave a Comment

a, abbr, b, blockquote, br, cite, code, dd, dfn, dl, dt, em, i, li, ol, p, pre, q, samp, strong, sub, sup, ul, and var are allowed as elements. They take some of their usual attributes as well.

Comments need to be well-formed XML and are moderated.