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

Visualizing Data with JavaScript and Canvas



presenters: Bradley Sepos and John Resig

presenters: Bradley Sepos and John Resig



Total Views
Views on SlideShare
Embed Views



4 Embeds 98 63 33 1 1



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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
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? View slide
  • 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 View slide
  • Basically, Canvas allows you to draw stuff using scripting
  • Canvas in the Wild • 2005/10/04/canvas-examples
  • Canvas in the Wild •
  • 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!