Hello, Canvas.

  • 281 views
Uploaded on

Gentle introduction to using HTML5 Canvas. …

Gentle introduction to using HTML5 Canvas.

Class slides for Year Up elective.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
281
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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