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