Hello, Canvas.
0 likes750 views
The <canvas> element allows for dynamic, scriptable rendering of 2D shapes and bitmap images in HTML. It is supported in all major browsers. JavaScript can be used to draw rectangles, change colors, and animate drawings on the <canvas> element. The document provides code samples and resources for learning how to use the <canvas> element to dynamically draw graphics in the browser.
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