Your SlideShare is downloading. ×
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Visualizing Data with JavaScript and Canvas
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Visualizing Data with JavaScript and Canvas

6,263

Published on

presenters: Bradley Sepos and John Resig

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,263
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
110
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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!

×