visualizing data with javascript and canvas

Visualizing DataUsing JavaScript and Canvas

Bradley Sepos and John ResigjQuery 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 trianglectx.beginPath();ctx.moveTo(25,25);ctx.lineTo(105,25);ctx.lineTo(25,105);ctx.fill();

// Stroked trianglectx.beginPath();ctx.moveTo(125,125);ctx.lineTo(125,45);ctx.lineTo(45,125);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

CreditsMany 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 achieveworld domination.

Thank you!