Blog

(Impatient? Play with the demo here.)

What’s Canvas Really Good For?

Canvas had, I’ll be honest, kind of bored me so far. Really? We’re back to drawing primitive lines, rectangles and arcs? In the great Flash vs. HTML5 debate, despite being an HTML guy, my feelings had been, “Not much is going to happen until there’s a tool as easy as Flash for building something interesting.”

Then I came across getImageData and putImageData.

(Links: whatwg.org and Mozilla Developer Central)

Inspiration

I was reading ajaxian.com’s article on Marco Lisci’s black and white canvas effects. It got me thinking: if black and white conversion is possible, what other cool image processing could we do?

Ideas

A blur of ideas tumbling out:

A lot of common filters (blur, sharpen, edge detect, emboss) use simple convolution matrixes. A 3x3 matrix involves sampling 9 points for every pixel and a little logic for the edges of images but could it be built fast enough to be usable in a browser?

Once I started playing with 3x3 convolution matrixes, I quickly realized they could be made to work with any size. Large ones get slow but it turns out Gaussian Blur can be built to work in one axis at a time so 5x5 (25 samples per point) can be written as 1x5 then 5x1 (10 samples per point).

Expanding Marco’s black and white conversion gets interesting as almost no one manages to use the correct, subtly different terms. Do we use the intensity (average of R,G,B)? HSV’s “hexcone” largest of R, G and B? HSL’s “bi-hexcone” average of the largest and smallest of R, G and B? Or lumiance, like Marco of 0.3R+0.59G+0.11B that maps closer to the human eye?

Once we pick a model for brightness/intensity, we can also add Hue and Saturation (credit goes to MJIJACKSON for speeding things up here). That gives us color shifting, increased and decreased saturation, etc.

If we are analyzing all of this information already, it’s trivial to add a color picker with sample, RGB and HSL values.

And wouldn’t a histogram be cool too?

As we are already looking at pixels, we can swap their X and Y axis (flip horizontal, flip vertical, rotate 180 if you do both) and 90 clockwise/counter-clockwise rotations.

And, of course, all of this needs a history and simple option for loading files.

Demo

As you can see, ideas flow once you get started. The attached demo is just a lazy Sunday’s coding so I’m not claiming the cleanest code, having got my head wrapped around every brightness/intensity argument or perfectly optimized everything but it’s a good example of the kind of potential Canvas can really have. Think of it as a showcase, not a tutorial.

I’ll probably write a few more posts over the next few days about specific things I ran in to, observations and the obvious things that are still missing. For now though, I’ll shut up and let you have a poke around.

Play with the demo here.

Performance Note

On a reasonable laptop or desktop, running Safari or Chrome, the slowest code – the filters, take a second or so to run.

If you run it on Firefox on the same machine, it will often run about as fast but has been known to take several times as long.

If you run it on an iPad? Good luck. Most of the basic features work but filters really do push the poor device’s mobile processor too hard.

And Internet Explorer? Magical and sparkly things are promised for IE9. Until then, not so much without Chrome Frame.

Other references:

• John Resig’s Processing.js
• hacks.mozilla.org HTML5 offline image editor/uploader
• http://mugtug.com/sketchpad/