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 −

Attribute
Value
Description
height pixels
Specifies height of the canvas.
width pixels
Specifies width of the canvas.



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>
raja
Published on 24-Jan-2018 08:46:11
Advertisements