Computer >> Computer tutorials >  >> Programming >> HTML

Why to use canvas tag in HTML5?


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 −

AttributeValueDescription
height Why to use canvas tag in HTML5?pixels
Specifies height of the canvas.
width Why to use canvas tag in HTML5?pixels
Specifies width of the canvas.



Why to use canvas tag in HTML5?

Example

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>
<html>
   <head>
      <title>HTML Canvas Tag</title>
   </head>
   <body>
      <canvas id = "myCanvas"></canvas>
      <script>
         var c = document.getElementById('myCanvas');
         var ctx = c.getContext('2d');
         ctx.fillStyle = '#7cce2b';
         ctx.fillRect(0,0,300,100);
      </script>
   </body>
</html>