HTML Canvas Graphics

By | March 2, 2021
HTML Canvas Graphics

In HTML5, we have some built-in elements which can draw graphics on the web page, and <canvas> is one of those elements. Before <canvas> element, we have to depend on CSS and JavaScript to create basic graphics completely.

What is <canvas>?

Vamware

Although <canvas> is an HTML element but it uses JavaScript to draw graphics. With the help of <canvas> element, we can create a simple graphic on the fly.

<canvas> stand-alone is not capable of creating fully-fledged graphics. It is only a container we also need to use JavaScript with it. With canvas, we get different methods to draw paths. Circles, text, images, and circles.

Examples

Draw a Rectangle or Square

The canvas covers a rectangular area as a container, which means with a simple <canvas> element we can create a rectangular or square box.

<!DOCTYPE html>
<html>
<head>
<title></title>

    <style type="text/css">
    #rect{
        border: solid red;
        }
   </style>
</head>
<body>
    <canvas id="rect" width="200" height="100"> </canvas>
</body>
</html>

Preview

By default, the canvas has no border, so we need to provide styling to it. It is also very important to provide an id or class to the canvas element because we need to style or script it.

Draw a Line

To draw a line using the canvas element, we have to use JavaScript.

<!DOCTYPE html>
<html>
<head>
  <title></title>
   
    <style type="text/css">
     #line {
      border: solid red;
      }
    </style>

</head>
<body>
  <canvas id="line" width="200" height="100"> Does not Support Canvas</canvas>
   <script type="text/javascript">
     var l = document.getElementById("line");
     var line = l.getContext("2d");
     line.moveTo(0, 0);
     line.lineTo(200, 100);
     line.stroke();
   </script>
</body>
</html>

Draw a Circle

To draw a circle within the container of <canvas>, we need to use JavaScript methods.

<!DOCTYPE html>
<html>
<head>

<title></title>
   <style type="text/css">
      #circle 
        {
          border: solid red; 
        }
   </style>

</head>
<body>

   <canvas id="circle" width="200" height="100"> Does not Support Canvas</canvas>

   <script type="text/javascript">
       var circle = document.getElementById("circle");
       var x = circle.getContext("2d");
       x.beginPath();
       x.arc(95, 50, 40, 0, 2 * Math.PI);
       x.stroke();
    </script>

</body>
</html>

Draw a Text

With JavaScript and <canvas> we can draw text, and display it inside the <canvas> container.

<!DOCTYPE html>
<html>
<head>
<title></title>
   
   <style type="text/css"> 
   #text {
      border: solid red; 
    }
   </style>

</head>
<body>

  <canvas id="text" width="220" height="100"> Does not Support Canvas</canvas>

   <script type="text/javascript">
      var t = document.getElementById("text");
      var text = t.getContext("2d");
      text.font = "30px Arial";
      text.fillText("TechGeekBuzz", 10, 50);
    </script>
</body>
</html>

Summary

  • <canvas>element is used to create graphics on the web page.
  • It only acts as a container for the graphic.
  • Canvas requires JavaScript for its graphic designing.
  • An old version of the browser may not support canvas.

Leave a Reply

Your email address will not be published. Required fields are marked *