HTML DOM Canvas Object

HTMLWeb DevelopmentFront End Technology

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 −

PropertyDescription
fillStyleTo set or return the color, gradient or pattern that is used to fill the drawing.
strokeStyleTo set or return the color, gradient, or pattern used for strokes.
shadowColorTo set or return the color to be used for shadows.
shadowBlurTo set or return the blur level of shadows.
shadowOffsetXTo set or return the horizontal distance of the shadow from the shape.
shadowOffsetYTo set or return the vertical distance of the shadow from the shape.

Methods

Following are the methods of Canvas object −

MethodDescription
createLinearGradient()To create a linear gradient.
createPattern()To create a pattern by repeating a specified element in a direction.
shadowColorTo 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 −

Live Demo

<!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);
}
raja
Updated on 20-Feb-2021 06:09:55

Advertisements