Download as PDF, PPTX
Uploaded byJaeni Sahuri
Canvas - HTML 5
The canvas element allows drawing graphics on a web page via scripting like JavaScript. It is supported by most modern browsers and uses a <canvas> tag with a script to access a drawing context. Common methods for drawing include beginPath(), moveTo(), lineTo(), and stroke() to draw lines, and the lineWidth and strokeStyle properties control the appearance of lines.
More Related Content
Canvas - HTML 5
- 1.
- 2. The HTML5 <canvas>element is used to draw graphics, on the fly, via scripting (usually JavaScript).
- 3. Browser Support • InternetExplorer 9+, Firefox, Opera, Chrome, and Safari
- 4. HTML5 Canvas Template <body> <canvasid="myCanvas" width="500" height="250"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // do stuff here </script> </body>
- 5. • To drawa line using HTML5 Canvas, we can use the beginPath(), moveTo(), lineTo(), and stroke() methods.
- 8. HTML5 Canvas LineWidth 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().
- 9. context.beginPath(); context.moveTo(100, 150); context.lineTo(450, 50); context.lineWidth= 15; context.stroke();
- 10. HTML5 Canvas LineColor // set line color context.strokeStyle = '#ff0000'; context.stroke();
- 11.