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 −

HTML DOM Canvas Object

On clicking CREATE −

HTML DOM Canvas Object

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);
}