Visualizing Data
Using JavaScript and Canvas
Bradley Sepos and John Resig
jQuery Camp 2007

Designers:
Bradley Sepos (.com)

What is Canvas?

What is Canvas?
• Think of Canvas as a procedural drawing API
• <canvas> creates a fixed-size drawing area that
exposes one or more rendering contexts
• Canvas is currently 2D, however 3D context
drawing may be in the future

Basically, Canvas allows you
to draw stuff using scripting

Canvas in the Wild
• http://overstimulate.com/articles/
2005/10/04/canvas-examples

Canvas in the Wild
• http://ejohn.org/

Let’s dive in.

Basic drawing: rectangle
• fillRect( x, y, width, height )
Draws a filled rectangle
• strokeRect( x, y, width, height )
Draws a rectangular outline
• clearRect( x, y, width, height )
Clears the area and makes it transparent

Basic drawing: rectangle
<canvas id=\"canvas\" width=\"150\" height=\"150\"></canvas>
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}

Basic drawing: lines & shapes
• beginPath()
• closePath()
• stroke()
• fill()
• moveto()
• lineto()

Basic drawing: lines & shapes
// Filled triangle // Stroked triangle
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(25,25); ctx.moveTo(125,125);
ctx.lineTo(105,25); ctx.lineTo(125,45);
ctx.lineTo(25,105); ctx.lineTo(45,125);
ctx.fill(); ctx.closePath();
ctx.stroke();

Visualizing Data

Demo

Compatibility

Compatibility
• Read the Apple and Mozilla Canvas docs
• </canvas> needed for Mozilla/Firefox
• Use excanvas.js from Google, translates most
Canvas into Internet Explorer’s native VML

Comparisons

Comparisons
• Versus Flash, Canvas is pluginless
• Versus SVG, Canvas is more universal
• Some advantages over SVG
• Canvas is not necessarily better than SVG
overall, however it is different

Advantages
• Best of class in cross-browser support
• No need to generate images on the server-side
• Use less bandwidth
• Use less connections (!!)
• It even prints

Caveats / Challenges
•?
• Always remember to consider accessibility
• Fallback content

Credits
Many thanks to the Mozilla Developer Center for their
excellent Canvas documentation and images, some of which are
used in this presentation.

Designers:
Bradley Sepos (.com)

Go forth and achieve
world domination.
Thank you!