Can the HTML5 Canvas element be created from the Canvas constructor?


In this article, we are going to perform can the HTML5 canvas element be created from the canvas constructor. We can achieve the task by using <canvas> element in HTML.

Before we dive into the examples, let’s look into the definition and usage of <canvas> element in HTML.

The Canvas Api useful for drawing graphics via javascript and html<canvas>element.It can be applied to animation, game graphics, data visualisation, photo editing, and real-time video processing, among other things.

The majority of the Canvas API's attention is on 2D visuals. The WebGL API renders hardware-accelerated 2D and 3D visuals and also makes use of the <canvas> element.

Let’s look into the following examples to get better understanding on canvas constructor

Using getElementId() method

The element with the given value is returned by the getElementById() function. If the element is absent, the getElementById() function returns null. One of the most often used methods in the HTML DOM is getElementById().

Example

In the following example we are using the getElementId() to get access to <canvas> element.

<!DOCTYPE html> 
<html> 
<body> 
   <canvas id="tutorial1" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
   <p>Click To Apply Canvas</p> 
   <button onclick="mytutorial()">CLICK</button>
   <script> 
      function mytutorial() { 
         var c = document.getElementById("tutorial1");
         var ctx = c.getContext("2d"); 
         ctx.fillStyle = "#D6EAF8"; 
         ctx.fillRect(20, 20, 150, 100);
      } 
   </script> 
</body> 
</html>

When the script gets executed, it access the <canvas> element generate the output consisting of a canvas box with a prompt "click to apply canvas" along with a click button.

If the user clicks the button, the canvas gets applied to the webpage.

Using createElement() method

The HTML DOM createElement() method is used for creating an HTML element dynamically using JavaScript. It constructs the element node specified by the element name as a parameter.

Example

Considering the following example we are using createElement() for creating a <canvas> element.

<!DOCTYPE html> 
<html> 
   <style> canvas { border: 1px solid black; } </style> 
<body> 
   <button onclick="mytutorial()">CLICK</button>
   <p>Click To Create Canvas</p> 
   <script> 
      function mytutorial() { 
         var x = document.createElement("CANVAS"); 
         var ctx = x.getContext("2d");
         ctx.fillStyle = "#ABEBC6"; 
         ctx.fillRect(20, 20, 150, 100);
         document.body.appendChild(x);
      } 
   </script> 
</body> 
</html>

On running the above script, it will generate the output consisting of a prompt "click to create canvas" along with a "click" button.

When the user clicks the button, the createElement() method gets access and creates a canvas on the webpage.

Updated on: 15-Dec-2022

256 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements