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

function draw(){
...
Basic drawing: lines & shapes

• beginPath()
• closePath()
• stroke()
• fill()
• moveto()
• lineto()
Basic drawing: lines & shapes
          // Filled triangle    // Stroked triangle
          ctx.beginPath();      ctx.begi...
Visualizing Data
Demo
Compatibility
Compatibility


• Read the Apple and Mozilla Canvas docs
• </canvas> needed for Mozilla/Firefox
• Use excanvas.js from Goo...
Comparisons
Comparisons

• Versus Flash, Canvas is pluginless
• Versus SVG, Canvas is more universal
• Some advantages over SVG
• Canv...
Advantages

• Best of class in cross-browser support
• No need to generate images on the server-side
• Use less bandwidth
...
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...
Designers:
Bradley Sepos (.com)
Go forth and achieve
 world domination.

     Thank you!
Upcoming SlideShare
Loading in...5
×

Visualizing Data with JavaScript and Canvas

6,291

Published on

presenters: Bradley Sepos and John Resig

Published in: Business, Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,291
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
110
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Visualizing Data with JavaScript and Canvas

  1. 1. Visualizing Data Using JavaScript and Canvas Bradley Sepos and John Resig jQuery Camp 2007
  2. 2. Designers: Bradley Sepos (.com)
  3. 3. What is Canvas?
  4. 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. 5. Basically, Canvas allows you to draw stuff using scripting
  6. 6. Canvas in the Wild • http://overstimulate.com/articles/ 2005/10/04/canvas-examples
  7. 7. Canvas in the Wild • http://ejohn.org/
  8. 8. Let’s dive in.
  9. 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. 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. 11. Basic drawing: lines & shapes • beginPath() • closePath() • stroke() • fill() • moveto() • lineto()
  12. 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. 13. Visualizing Data
  14. 14. Demo
  15. 15. Compatibility
  16. 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. 17. Comparisons
  18. 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. 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. 20. Caveats / Challenges •? • Always remember to consider accessibility • Fallback content
  21. 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. 22. Designers: Bradley Sepos (.com)
  23. 23. Go forth and achieve world domination. Thank you!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×