Wednesday, March 10th, 2010

Harmony: Canvas Drawing Tool

Category: Canvas, iPhone, Showcase

Harmony is a new drawing tool, a HTML5/Canvas experiment with great potential. It provides some unique brush styles, and can produce some great-looking charcoal pencil style sketches, among other things. Better to try it out than explain it in words.

Creator Mr. Doob (Richard Cabello) explains how he used Canvas to make it darker the more you draw over it:

The whole thing is quite modular so I can keep adding more brush styles whenever I get inspired. During the process I found out that, for some reason (apparently lack of hardware acceleration), Firefox and Opera do not support context.globalCompositeOperation = ‘darker’. This was on the HTML5 spec before but got removed. Just so you know what I’m talking about, this is like the “multiply” blending in Photoshop. Webkit does support it tho. I hope they put it back on the specs and all browsers support it.

You can also save images using data URI encoding.

As it works on webkit, he made sure it worked on the mobile Android and iPhone browsers. No multi-touch as yet, but the touch UI still makes a nice input mechanism.


(Thanks FND)

Posted by Michael Mahemoff at 4:50 am

4.4 rating from 66 votes


Comments feed TrackBack URI

Gave this a 5-star rating for sheer coolness. That said… I find myself wondering at what point something like this stops being about JS/HTML and is really just about image processing and vector graphics tricks/techniques.

Don’t get me wrong – still plenty here to make it relevant. (rendering performance, cool use of png encoding to make images savable, etc.)

Comment by broofa — March 10, 2010

yeah, this may make me bying an Ipad if I can draw on it ;)

Comment by Linearis — March 10, 2010

The png output is slightly darker than what I see directly in Chrome

Comment by Darkimmortal — March 10, 2010

Leave a comment

You must be logged in to post a comment.