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
HTML DOM Canvas Object
The HTML DOM Canvas object is associated with the <canvas> element introduced in HTML5. The <canvas> tag is used to draw graphics with the help of JavaScript. The canvas acts as a container for graphics. On canvas, we can draw lines, shapes etc.
Properties
Following are the properties for Canvas Object −
| Property | Description |
|---|---|
| fillStyle | To set or return the color, gradient or pattern that is used to fill the drawing. |
| strokeStyle | To set or return the color, gradient, or pattern used for strokes. |
| shadowColor | To set or return the color to be used for shadows. |
| shadowBlur | To set or return the blur level of shadows. |
| shadowOffsetX | To set or return the horizontal distance of the shadow from the shape. |
| shadowOffsetY | To set or return the vertical distance of the shadow from the shape. |
Methods
Following are the methods of Canvas object −
| Method | Description |
|---|---|
| createLinearGradient() | To create a linear gradient. |
| createPattern() | To create a pattern by repeating a specified element in a direction. |
| shadowColor | To set or return the color to be used for shadows. |
| createRadialGradient() | To create a circular gradient. |
| addColorStop() | To set or return the horizontal distance of the shadow from the shape. |
Syntax
Following is the syntax for −
Creating a canvas object −
var x=document.createElement("CANVAS");Example
Let us see an example of the HTML DOM canvas object −
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: 1px double blue;
margin:1em;
}
</style>
</head>
<body>
<h1>CANVAS</h1>
<button onclick="createCanvas()">CREATE</button>
<p>Click the above button to create a CANVAS element with a green circle in it</p>
<script>
function createCanvas() {
var x = document.createElement("CANVAS");
var ctx = x.getContext("2d");
ctx.fillStyle = "#C7EA46";
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
document.body.appendChild(x);
}
</script>
</body>
</html>Output
This will produce the following output −
On clicking CREATE −
In the above example −
We have first created a button CREATE, which when clicked upon will execute the createCanvas() method.
<button onclick="createCanvas()">CREATE</button>
The createCanvas() method creates a <canvas> element . We then get the context for the newly created <canvas> element using the getContext() method. Each canvas method can have only one context associated with it. The parameter value “2d” inside the getContext() method specifies that it will be used to draw shape,sizes i.e 2d stuff only. We then set the fill color using the fillstyle and use beginPath() method to begin the path.
After that, use the arc() method to define the circle co-ordinates and fill that circle with the fillstyle color. Finally we use the stroke() method to actually draw on the canvas and append the canvas as the child of the body element using the appendChild() method of document.body −
function createCanvas() {
var x = document.createElement("CANVAS");
var ctx = x.getContext("2d");
ctx.fillStyle = "#C7EA46";
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
document.body.appendChild(x);
}
256 Views
