Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
234 Views
