Hello, Canvas.

644 views

Published on

Gentle introduction to using HTML5 Canvas.

Class slides for Year Up elective.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
644
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hello, Canvas.

  1. 1. Hello, Canvas.Hello, Canvas.
  2. 2. What is a canvas?
  3. 3. 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>
  4. 4. <!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
  5. 5. 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>
  6. 6. 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
  7. 7. 0, 0 x y
  8. 8. x 0, 0 y 3, 1
  9. 9. x 0, 0 y 3, 1 2, 5
  10. 10. ctx.fillRect(5, 5, 3, 3); start x coordinate start y coordinate width height
  11. 11. x 0, 0 y ctx.fillRect(5, 5, 3, 3);
  12. 12. x 0, 0 y ctx.fillRect(5, 5, 3, 3); 5, 5
  13. 13. x 0, 0 y ctx.fillRect(5, 5, 3, 3); 5, 5 3 3
  14. 14. Getting fancy ctx.fillStyle = 'red'; // Draw a red square ctx.fillStyle = 'blue'; // Draw a blue square ctx.fillStyle = '#8A1CDA'; // Draw a purple square
  15. 15. Code Samples https://github.com/sethmcl/yearup_intro_to_programming/tree/master/hello_canvas/part_1 Resources
  16. 16. Use canvas to draw a picture like this in the browser. BONUS: Can you animate it? Homework

×