Why to use canvas tag in HTML5?

HTMLWeb DevelopmentFront End Technology

Specifies height of the canvas.The HTML <canvas> tag is used to draw graphics, animations, etc. using scripting. The <canvas> tag introduced in HTML5.

Let’s see a simple <canvas> element with two specific attributes width and height along with all the core HTML5 attributes like id, name, and class etc.

<canvas id="myCanvas" width="100" height="100"></canvas>

Here are the attributes −

height pixels
Specifies height of the canvas.
width pixels
Specifies width of the canvas.


You can try to run the following code to learn how to use canvas to create a rectangle. The canvas element has a DOM method called getContext, which obtains rendering context and its drawing functions. This function takes one parameter, the type of context 2d.

<!DOCTYPE html>
      <title>HTML Canvas Tag</title>
      <canvas id = "myCanvas"></canvas>
         var c = document.getElementById('myCanvas');
         var ctx = c.getContext('2d');
         ctx.fillStyle = '#7cce2b';
Updated on 15-Jun-2020 11:53:50