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

Visualizing Data with JavaScript and Canvas

on

  • 9,250 views

presenters: Bradley Sepos and John Resig

presenters: Bradley Sepos and John Resig

Statistics

Views

Total Views
9,250
Views on SlideShare
9,152
Embed Views
98

Actions

Likes
5
Downloads
108
Comments
0

4 Embeds 98

http://blog.dreamcss.com 63
http://www.slideshare.net 33
http://static.slidesharecdn.com 1
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Visualizing Data with JavaScript and Canvas Visualizing Data with JavaScript and Canvas Presentation Transcript

    • 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 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=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); } }
    • Basic drawing: lines & shapes • beginPath() • closePath() • stroke() • fill() • moveto() • lineto()
    • 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();
    • 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
    • Credits Many 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 achieve world domination. Thank you!