JavaScript Canvas
•Download as PPTX, PDF•
0 likes•93 views
The document discusses the JavaScript Canvas API which allows drawing 2D and 3D graphics on HTML pages. It provides steps to get started with Canvas including creating a <canvas> element, getting the drawing context, and using methods like beginPath(), moveTo(), lineTo(), strokeWidth, and stroke() to draw lines on the canvas.
Recommended
More Related Content
Similar to JavaScript Canvas
Similar to JavaScript Canvas (20)
More from jagriti srivastava
More from jagriti srivastava (15)
Recently uploaded
Recently uploaded (20)
JavaScript Canvas
- 2. Intro.. Used to draw images Came with HTML5 to draw 2d and 3d graphics Used for games and visualization
- 3. How to start Must have concept of HTML and basic Javascript Steps to get started : 1. Create canvas element with attributes – ID, HEIGHT and WIDTH 2. Add Styles(*Optional) 3.Get canvas element using ID 4. Get Canvas Context (2D or 3D) 5. Draw using Context
- 4. Steps 1. Create Canvas // index.html <canvas id="myCanvas" width="800" height="1200"></canvas>
- 5. Step 2 and 3 Add Styles // styles.css body { background: #111; color: #f8f8f8; } #myCanvas { background: #f8f8f8; padding: 0; margin: 0 auto; margin-bottom: 1rem; display: block; }
- 6. Step 3 and 4 Get canvas using Id and canvas context var canvas = document.getElementById("myCanvas"); var ctext = canvas.getContext("2d");
- 7. Step 5 **Draw using context ** ctext.beginPath(); ctext.moveTo(150,10);//moveTo(x,y) - defines the starting point of the line ctext.lineTo(20, 100);//lineTo(x,y) - defines the ending point of the line ctext.lineWidth = 5; ctext.strokeStyle = "blue"; //color of the line ctext.stroke(); // to provide ink to the line
- 8. <!DOCTYPE HTML> <html> <head> <title> Canvas </title> <style> body { margin: 0px; padding: 0px; } #myCanvas { border: 1px solid red; } </style> <script> window.onload = function() { var canvas = document.getElementById("mCanvas"); var ctext = canvas.getContext("2d"); ctext.beginPath(); ctext.moveTo(150,10);//moveTo(x,y) ctext.lineTo(20, 100);//lineTo(x,y) ctext.lineWidth = 5; ctext.strokeStyle = "blue"; //color of the line ctext.stroke(); // to provide ink to the line }; </script> </head> <body> <canvas id="mCanvas" width="360" height="200"></canvas> </body> </html>
- 9. How to draw Set the style - 1)Begin Path 2)Use functions and Coordinates 3)Draw the path to screen