HTML5 Canvas

In the real world painters paint on canvas. On the web, developers also paint on <canvas>.

In the real world, artists paint with paint brushes on rectangular pieces of canvas cloth, which they call their canvas. Fittingly, the new HTML5 Canvas element (<canvas>) is also a rectangle where a developer paints, this time using JavaScript.

Unlike a real life canvas, where you only get to see the final product, with <canvas> elements you get to see the painting in many different stages. And the painting can even be interactive. In other words, <canvas> element are a great place for animations and user interaction, and for that reason, many web developers believe that the combination of <canvas> and JavaScript will eventually replace Flash altogether.

Since we are dealing with computers and they only understand computer languages and math, painting with JavaScript involves writing a whole series of functions that plot the path of your “paint stroke” on the <canvas> element’s x and y-axis.

What you have to do, in essence, is write your computer extremely clear mathematical instructions for how to paint on it’s <canvas>. For example you might find yourself writing something like this:

THREE.Vector3 = function (f, g, e) {
this.x = f || 0;
this.y = g || 0;
this.z = e || 0

or this:

this.minSelf = function (a) {
n = Math.max(n, a.getX1());
l = Math.max(l, a.getY1());
q = Math.min(q, a.getX2());
m = Math.min(m, a.getY2());

The process of writing all of that may not be seem as creative as painting with oil, but the result is no less magnificent.

The two code snippets above both come from a <canvas> element collaboration between Google’s Chrome team and the band Arcade Fire. Check out their interactive film experience The Wilderness Downtown, for some mind blowing <canvas> fun. You can learn more about the piece here.

Cocktail Party Fact

What is a new HTML element without a little bit of controversy?

The <canvas> element was first introduced by Apple back in 2004, when they used it to power the Apple Dashboard widgets and some cool functionality in the Safari browser.

When Apple introduced the <canvas> element, many in the web community were annoyed that they went ahead and created their own Apple thing instead of using SVGs, which had been the standard previously used for drawing dynamic graphics on the web.