Your SlideShare is downloading. ×
Hello, Canvas.
Hello, Canvas.
Hello, Canvas.
Hello, Canvas.
Hello, Canvas.
Hello, Canvas.
Hello, Canvas.
Hello, Canvas.
Hello, Canvas.
Hello, Canvas.
Hello, Canvas.
Hello, Canvas.
Hello, Canvas.
Hello, Canvas.
Hello, Canvas.
Hello, Canvas.
Hello, Canvas.
Hello, Canvas.
Hello, Canvas.
Hello, Canvas.
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Hello, Canvas.

322

Published on

Gentle introduction to using HTML5 Canvas. …

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
322
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
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

×