Visualizing Data with JavaScript and Canvas

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 ﬁxed-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 stuﬀ 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 • ﬁllRect( x, y, width, height ) Draws a ﬁlled 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.ﬁllRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); } }

Basic drawing: lines & shapes • beginPath() • closePath() • stroke() • ﬁll() • 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.ﬁll(); ctx.closePath(); ctx.stroke();

Visualizing Data

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 diﬀerent

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!

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

Visualizing Data with JavaScript and Canvas

by guestee8c59 on Nov 16, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 59

Statistics

Visualizing Data with JavaScript and Canvas — Presentation Transcript