.png)
HTML | DOM Canvas Object
The DOM Canvas Object is used to represent the HTML <Canvas> element. The <canvas> tag is used to draw a graphics in the document using javascript. It is new in HTML5. The canvas element is accessed by getElementById().
Syntax:
accessed by getElementById("id"). Where “id” is the ID assigned to the Canvas tag.
Example-1:
<!DOCTYPE html><html> <head> <title>canvas Tag</title></head> <body> <center> <h1 style="color:green; Font-size:35px;" > GeeksForGeeks </h1> <h2>DOM Canvas Object</h2> <!-- canvas Tag starts here --> <canvas id="geeks" height="200" width="200" style="border:1px solid green"> </canvas> <!-- canvas Tag ends here --> <br> <br> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { var gfg = document.getElementById("geeks"); var sudo = gfg.getContext("2d"); sudo.beginPath(); sudo.arc(100, 100, 90, 0, 2 * Math.PI); sudo.stroke(); } </script></body> </html> |
Output:
Before Clicking On Button:
After Clicking on Button:
Example-2: Canvas Object can be created by using the document.createElement method.
<!DOCTYPE html><html> <head> <style> canvas { border: 3px solid black; } </style></head> <body> <h1 style = "color: green; font-size:40px;" > GeeksForGeeks </h1> <h2>DOM Canvas Object</h2> <button onclick="myGeeks()"> Submit </button> <script> function myGeeks() { var geeks = document.createElement("CANVAS"); var gfg = geeks.getContext("2d"); gfg.fillStyle = "green"; gfg.fillRect(40, 40, 200, 100); document.body.appendChild(geeks); } </script> </body> </html> |
Output:
Before Clicking on Button:
After Clicking on Button:
Supported Browsers: The browser supported by DOM Canvas Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
.png)
