HTML canvas Tag


The canvas tag in HTML is used to draw graphics. To draw the graphics, you need to use script. This tag introduced in HTML5. Every canvas has two elements that describes the height and width of the canvas i.e. height and width respectively.

Following are the attributes −

  • height − The height of the canvas in pixels
  • width − The width of the canvas in pixels

Let us now see an example to implement the canvas tag in HTML −

Example

 Live Demo

<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="600" height="350" style="border −2px solid orange;">
</canvas>
<script>
   var c = document.getElementById("newCanvas");
   var ctx = c.getContext("2d");
   ctx.shadowBlur = 20;
   ctx.shadowColor = "black";
   ctx.fillStyle = "green";
   ctx.fillRect(40, 40, 100, 250);
   ctx.shadowBlur = 30;
   ctx.shadowColor = "blue";
   ctx.fillStyle = "orange";
   ctx.fillRect(200, 40, 200, 150);
</script>
</body>
</html>

Output

Let us see another example to draw a quadratic curve in HTML5 −

Example

 Live Demo

<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
   width − 100px;
   height −100px;
   margin − 0px auto;
}
</style>
<script type>
   function drawShape() {
      // get the canvas element using the DOM
      var canvas = document.getElementById('mycanvas');
      // Make sure we don't execute when canvas isn't supported
      if (canvas.getContext) {
         // use getContext to use the canvas for drawing
         var ctx = canvas.getContext('2d');
         // Draw shapes
         ctx.beginPath();
         ctx.moveTo(75,25);
         ctx.quadraticCurveTo(25,25,25,62.5);
         ctx.quadraticCurveTo(25,100,50,100);
         ctx.quadraticCurveTo(50,120,30,125);
         ctx.quadraticCurveTo(60,120,65,100);
         ctx.quadraticCurveTo(125,100,125,62.5);
         ctx.quadraticCurveTo(125,25,75,25);
         ctx.stroke();
      } else {
         alert('You need Safari or Firefox 1.5+ to see this demo.');
      }
   }
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>

Output

raja
Published on 12-Jun-2019 15:10:50
Advertisements