Canvas is a HTML extension for procedural graphics. Yeah, I know what you are thinking, SVG isn't adopted yet, and here we have another graphical extension that will never be widely deployed. And why do we need Canvas, isn't SVG enough?

Whether Canvas gets widely deployed or not, it is available on Firefox 1.5 and Safari. It is standardized by WHATWG. There has even been some talk of implimenting SVG/Canvas on IE using javascript and VML. For the intraweb where requirements can mandating usage of Firefox, Canvas/SVG provide another great tool for visualation of corporate data. Eventually, Canvas/SVG might be ready for general consumption on the world wide web.

Canvas is different than SVG in an important way. To draw on SVG, you have graphic primitives specified by XML, but Canvas is more like postscript/openGL. In Canvas, you have a context (rotation, location, transformation, and you draw on the canvas with code like lineTo, quadraticCurveTo, arc, rect, fill, stroke. It isn't hard to see that Canvas can be used to as a foundation for SVG - in fact that is how they are implimented in Firefox.

If you know postscript or OpenGL, you'll grok canvas . . .

Why Canvas Matters

Canvas is important because sometimes a program is a more compact way to represent images. I highly recommend reading The Algorithmic Beauty of Plants (and more recent work at Algorithmic Beauty which includes a link to a PDF of the book!).

Samples

I'm going to assume you either have Safari or Firefox 1.5 (or later). Also, Safari has issues with some of these samples (perhaps I need to only run the scripts after the page has been loaded?)

Chart

Pretty simple example. We create a (graphic) context, then create random sized rectangles. To draw a rectangle we create a path, then draw the rectange (x,y,width,height), then fill it.


  var ctx = document.getElementById('chart').getContext('2d');
  ctx.fillStyle = '#08f';

  function chart( x, w, val ) {
      ctx.beginPath();
      ctx.rect(x,100-val,w,val);
      ctx.fill();
  }

  var w=5;
  for (var x=0; x < 500; x+=w) {
      chart( x, w, 100*Math.random() );
  }

Animated Rectangles

In this example, we see animation and random coloring. The coloring is done by specifying fillStyle using rgba(##,##,##,##) format. Animation is done using setTimeout to recall the function after it finishes.


  var animatedctx = document.getElementById('animated').getContext('2d');

  function addBox() {
    animatedctx.beginPath();

    if (Math.random() > 0.99) animatedctx.clearRect(0,0,500,100); // randomly clear the screen with low probability

    animatedctx.fillStyle='rgba('+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+')';
    animatedctx.rect(Math.random()*500,Math.random()*100,Math.random()*100, Math.random()*100 );
    animatedctx.fill();
    setTimeout('addBox()', 50 );
  }

  addBox();

Live Charting - server stats

Based on the above examples above, here we have a live chart using XmlHttpRequest to pull the server statistics every 5 seconds.

(use view source to see the code)

Cellular Automata

This is rule 30, but you can change it to any rule you want by using (try 26 or 99, you can press return instead of clicking generate):

Rule:

If you want to know more about what these are, check out Mathworld's article. Again, view source to see what I did.

More work

I referenced Lindenmayer Systems in the introduction, you can see a Canvas Lindenmayer System or play with interactive Lindenmayer Systems.

Resources

More Work