Canvas allows for pixel-level drawing and animation capabilities within HTML5. It provides an API for rendering graphics to the document using JavaScript. Key features include drawing basic shapes, applying styles/colors, image manipulation, and transformations. Animation can be achieved by clearing and redrawing the canvas at intervals or on timeouts. Canvas is best for raster graphics/pixel manipulation while SVG is better for vector/resolution independent graphics.

1. HTML-5 Canvas

3. History

5. Lingo

6. What it is not

7. First kicks <canvas id=&quot;stockGraph&quot; width=&quot;150&quot; height=&quot;150&quot;> You browser doesn't support canvas. </canvas> var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); }

8. Basic shapes Rectangle : fillRect(x,y,width,height) strokeRect(x,y,width,height) clearRect(x,y,width,height) Circle: arc(x, y, radius, startAngle, endAngle, anticlockwise)

9. Paths beginPath() closePath() stroke() Fill() moveTo(x, y) lineTo(x, y)

10. Exercise - 1

12. Beziere curves quadraticCurveTo(cp1x, cp1y, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

13. Styling lineWidth = value lineCap = type lineJoin = type miterLimit = value fillStyle = color strokeStyle = color ctx.globalAlpha = 0...1; createLinearGradient(x1,y1,x2,y2) createRadialGradient(x1,y1,r1,x2,y2,r2) addColorStop(position, color) var ptrn =ctx.createPattern(img,'repeat'); ctx.fillStyle = ptrn;

14. Images var img = new Image(); img.src = 'myImage.png'; // Set source path OR Img = 'data:image/gif;base64,R0lGO......' drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

15. Transformations translate(x, y) rotate(alpha)

16. Compositing globalCompositeOperation = [type] ctx.beginPath(); drawAPath(); ctx.clip();

18. Canvas vs Flash