Your SlideShare is downloading. ×
0
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,281

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,281
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

Transcript of "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.

×