HTML DOM Canvas Object Last Updated : 14 Jun, 2023 Comments Improve Suggest changes Like Article Like Report The DOM Canvas Object is used to represent the HTML <Canvas> element. The <canvas> tag is used to draw 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: In this example, we will use the DOM Canvas Object. HTML <!DOCTYPE html> <html> <head> <title>canvas Tag</title> </head> <body> <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() { let gfg = document.getElementById("geeks"); let sudo = gfg.getContext("2d"); sudo.beginPath(); sudo.arc(100, 100, 90, 0, 2 * Math.PI); sudo.stroke(); } </script> </body> </html> Output: Example 2: Canvas Object can be created by using the document.createElement method. HTML <!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() { let geeks = document.createElement("CANVAS"); let gfg = geeks.getContext("2d"); gfg.fillStyle = "green"; gfg.fillRect(40, 40, 200, 100); document.body.appendChild(geeks); } </script> </body> </html> Output: Supported Browsers: The browser supported by DOM Canvas Object are listed below: Google Chrome 1Edge 12Internet Explorer 9Firefox 1.5Opera 9Safari 2 Comment More infoAdvertise with us Next Article HTML DOM BR Object M manaschhabra2 Follow Improve Article Tags : Misc Web Technologies HTML Web technologies HTML-DOM +1 More Practice Tags : Misc Similar Reads HTML DOM removeAttribute() Method The DOM removeAttribute() method is used to remove an attribute with specified name from the element. It is similar to the removeAttributeNode() method but the difference is that the removeAttributeNode method is used to remove the specified attribute object, but on the other hand, removeAttribute r 1 min read HTML DOM DD Object The DOM DD Object is used to represent the HTML <DD> element. The DD element is accessed by getElementById(). Syntax: document.getElementById("ID"); Where “id†is the ID assigned to the “dd†tag. Example 1: In this example, we will use DOM DD Object. HTML <!DOCTYPE html> <html> 2 min read HTML DOM Style backgroundClip Property The DOM style backgroundClip Property is used to set or return the painting area of the background. Syntax: It is used to return the backgroundClip property.object.style.backgroundClip It is used to set the backgroundClip property. object.style.backgroundClip = "border-box|padding-box|content-box|in 1 min read HTML DOM setAttributeNode() Method The setAttributeNode() method in HTML DOM is used to add the specified attribute node to an element. If the specified attribute is already present, then this method replaces it. Syntax: element.setAttributeNode(name) Parameter: Only one parameter is accepted name.Where the name is the attribute node 1 min read HTML DOM BR Object The DOM BR Object is used to represent the HTML <br> element. The br element is accessed by getElementById(). Syntax: document.getElementById(id) Where "id" is the ID assigned to the br tag. Property: clear: It is used to Sets or return the flow of text around floating objects Example 1: In th 2 min read HTML DOM className Property In the HTML document, the className property is used to set or return the value of an element’s class attribute. Using this property, the user can change the class of an element to the desired class. Syntax: returns the className propertyHTMLElementObject.className;sets the className propertyHTMLEle 3 min read HTML DOM Location reload() Method The location reload() method in HTML DOM is used to reload the current document. This method refreshes the current documents. It is similar to the refresh button in the browser. Note: It does not return any value. Syntax:location.reload( forceGet )Parameters: It does not take any parameters Exampl 1 min read HTML DOM Datalist Object The DOM Datalist Object is used to represent the HTML <Datalist> element. The Datalist element is accessed by getElementById(). Properties: It has an 'Option' attribute which is used to return the collection of all options values in a datalist. Syntax: document.getElementById("gfg"); Where "gf 2 min read HTML DOM nodeType Property The DOM nodeType Property is used to find out the type of the node that we are referring to. The type for a particular node is returned in numerical form. DOM nodeType property is a read-only property. Return value : It returns a numeric value as according to the type of node. 1: If node is an eleme 2 min read HTML DOM Cite Object The DOM Cite Object is used to represent HTML <Cite> element. The Cite element is accessed by getElementById(). Syntax: document.getElementById("id"); Where "id" is the ID assigned to the cite tag. Example 1: In this example, we will use DOM Cite Object HTML <!DOCTYPE html> <html> 1 min read Like