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>? 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.

    People are also reading: