Lessons from Visual Programming with JavaScript

Web 2.0 Expo Conference

Lessons from Visual Programming with JavaScript (John Resig, Mozilla Co.)

In HTML 5 there is a new element called <canvas>. The canvas element is interesting because it allows you to do raster type graphics on a standard HTML page. Here’s the wikipedia page on the canvas element,

John showed an example using the JQuery “plot” plugin. The key thing to note is that the canvas element is not vector based like SVG. It is raster based, more like Microsoft “Paint”.

So that part was kind of neat and then he moved on to something called: “Processing”.  Here’s the wikipedia page on processing.

Here’s the Processing home page

Processing is written in Java and what it does is essentially simplifies drawing in Java.
It is a large (very complete) but simple (takes very little code to produce beautiful results) API.

Processing has its own IDE but up until now you couldn’t run it in a browser except as an applet. But applets are slow and yucky.

John ported Processing to JavaScript and it runs in the browser using the canvas element. The result is Processing.js. Currently it requires FireFox 3 but should also work in Google Chrome. IE8 does not support canvas.


  • substrate: recursive “city map” drawing.
  • zipdecode: graphical display of zipcodes against a map.

The interesting part of this is that with these two technologies (the canvas element and Processsing.js) you can produce beautiful rich UI experiences using only HTML and javascript. No need for plugins at all. Because the canvas element delegates down to the OS to do the actual rendering the response time and overall experience is really nice, even with mediocre machines.

It's only fair to share...
Share on Facebook
Tweet about this on Twitter
Share on LinkedIn

Leave a Reply