4. 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
9. 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
10. 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);
}
}
16. 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
18. 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
19. 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
21. Credits
Many thanks to the Mozilla Developer Center for their
excellent Canvas documentation and images, some of which are
used in this presentation.