Hello, Canvas.
•
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 Hello, Canvas.
Similar to Hello, Canvas. (20)
Recently uploaded
Recently uploaded (20)
Hello, Canvas.
- 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