Download - Visualizing Data with JavaScript and Canvas
![Page 1: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/1.jpg)
Visualizing DataUsing JavaScript and Canvas
Bradley Sepos and John ResigjQuery Camp 2007
![Page 2: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/2.jpg)
Designers:Bradley Sepos (.com)
![Page 3: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/3.jpg)
What is Canvas?
![Page 4: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/4.jpg)
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
![Page 5: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/5.jpg)
Basically, Canvas allows you to draw stuff using scripting
![Page 6: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/6.jpg)
Canvas in the Wild
• http://overstimulate.com/articles/2005/10/04/canvas-examples
![Page 8: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/8.jpg)
Let’s dive in.
![Page 9: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/9.jpg)
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
![Page 10: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/10.jpg)
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); }}
![Page 11: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/11.jpg)
Basic drawing: lines & shapes
• beginPath()
• closePath()
• stroke()
• fill()
• moveto()
• lineto()
![Page 12: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/12.jpg)
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();
![Page 13: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/13.jpg)
Visualizing Data
![Page 14: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/14.jpg)
Demo
![Page 15: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/15.jpg)
Compatibility
![Page 16: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/16.jpg)
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
![Page 17: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/17.jpg)
Comparisons
![Page 18: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/18.jpg)
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
![Page 19: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/19.jpg)
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
![Page 20: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/20.jpg)
Caveats / Challenges
• ?
• Always remember to consider accessibility
• Fallback content
![Page 21: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/21.jpg)
CreditsMany thanks to the Mozilla Developer Center for their
excellent Canvas documentation and images, some of which are used in this presentation.
![Page 22: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/22.jpg)
Designers:Bradley Sepos (.com)
![Page 23: Visualizing Data with JavaScript and Canvas](https://reader034.vdocuments.site/reader034/viewer/2022052522/554fb805b4c90542018b45cd/html5/thumbnails/23.jpg)
Go forth and achieveworld domination.
Thank you!