visualizing data with javascript and canvas
DESCRIPTION
presenters: Bradley Sepos and John ResigTRANSCRIPT
Visualizing DataUsing JavaScript and Canvas
Bradley Sepos and John ResigjQuery 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
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="canvas" width="150" height="150"></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 trianglectx.beginPath();ctx.moveTo(25,25);ctx.lineTo(105,25);ctx.lineTo(25,105);ctx.fill();
// Stroked trianglectx.beginPath();ctx.moveTo(125,125);ctx.lineTo(125,45);ctx.lineTo(45,125);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
CreditsMany 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 achieveworld domination.
Thank you!