Canvas - HTML 5

1,044 views
903 views

Published on

Canvas - HTML 5

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

  • Be the first to like this

No Downloads
Views
Total views
1,044
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
41
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Canvas - HTML 5

  1. 1. What is Canvas?
  2. 2. The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
  3. 3. Browser Support • Internet Explorer 9+, Firefox, Opera, Chrome, and Safari
  4. 4. HTML5 Canvas Template <body> <canvas id="myCanvas" width="500" height="250"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // do stuff here </script> </body>
  5. 5. • To draw a line using HTML5 Canvas, we can use the beginPath(), moveTo(), lineTo(), and stroke() methods.
  6. 6. HTML5 Canvas Line Width Tutorial • To define the width of an HTML5 Canvas line, we can use the lineWidth property of the canvas context. The lineWidth property must be set before calling stroke().
  7. 7. context.beginPath(); context.moveTo(100, 150); context.lineTo(450, 50); context.lineWidth = 15; context.stroke();
  8. 8. HTML5 Canvas Line Color // set line color context.strokeStyle = '#ff0000'; context.stroke();
  9. 9. Thanks http://www.gratisan.com http://jogjawebcenter.com

×