presenters: Bradley Sepos and John Resig

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

2. Designers:
Bradley Sepos (.com)

3. What is Canvas?

4. 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

5. Basically, Canvas allows you
to draw stuff using scripting

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

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

8. Let’s dive in.

9. 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

10. Basic drawing: rectangle
<canvas id=quot;canvasquot; width=quot;150quot; height=quot;150quot;></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);
}
}

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

12. 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();

13. Visualizing Data

14. Demo

15. Compatibility

16. 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

17. Comparisons

18. 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

19. 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

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

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

22. Designers:
Bradley Sepos (.com)

23. Go forth and achieve
world domination.
Thank you!