Introduction to HTML5 Canvas - Draw Shapes & Animate
•
0 likes•744 views
Gentle introduction to using HTML5 Canvas. Class slides for Year Up elective.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (13)
Similar to Introduction to HTML5 Canvas - Draw Shapes & Animate
Similar to Introduction to HTML5 Canvas - Draw Shapes & Animate (20)
Recently uploaded
Recently uploaded (20)
Introduction to HTML5 Canvas - Draw Shapes & Animate
- 2. What is a canvas?
- 5. The <canvas> Element <!doctype html> <html> <head> <title>Canvas is awesome!</title> </head> <body> <canvas width="500" height="500"> Sorry, your browser does not support canvas :( </canvas> </body> </html>
- 6. <!doctype html> <html> <head> <title>Canvas is awesome!</title> </head> <body> <canvas width="500" height="500"> Sorry, your browser does not support canvas :( </canvas> </body> </html> The <canvas> Element
- 8. JavaScript to the rescue! <!doctype html> <html> <head> <title>Canvas is awesome!</title> </head> <body> <canvas width="500" height="500"> Sorry, your browser does not support canvas :( </canvas> <script src="script.js"></script> </body> </html>
- 9. JavaScript to the rescue! // script.js var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); ctx.fillRect(0, 0, 100, 100); Learn more: https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas
- 11. 0, 0 x y
- 12. x 0, 0 y 3, 1
- 13. x 0, 0 y 3, 1 2, 5
- 14. ctx.fillRect(5, 5, 3, 3); start x coordinate start y coordinate width height
- 15. x 0, 0 y ctx.fillRect(5, 5, 3, 3);
- 16. x 0, 0 y ctx.fillRect(5, 5, 3, 3); 5, 5
- 17. x 0, 0 y ctx.fillRect(5, 5, 3, 3); 5, 5 3 3
- 18. Getting fancy ctx.fillStyle = 'red'; // Draw a red square ctx.fillStyle = 'blue'; // Draw a blue square ctx.fillStyle = '#8A1CDA'; // Draw a purple square
- 20. Use canvas to draw a picture like this in the browser. BONUS: Can you animate it? Homework