<canvas>



HTML <canvas> tag


The <canvas> tag is used for creating graphics dynamically in an HTML document using a scripting language such as JavaScript.

Alternative text should be provided within the <canvas> element as fallback content and to aid accessibility; this will be rendered within browsers where JavaScript is disabled and also on older browsers not supporting the <canvas> element.

 There are several methods in canvas to draw paths, boxes, circles, text, and add images.

How to create an HTML canvas?

A canvas is a rectangle-like area on an HTML page. It is specified with the canvas element. By default, the <canvas> element has no border and no content, it is like a container.


Syntax : 

<canvas id="mycanvas" width="200" height="100"> </canvas>  

Here is a simple <canvas> element which has only two specific attributes width and height plus all the core HTML5 attributes like id, name, and class, etc.

Here is an example of a basic, empty canvas:


 

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

Output :


Supporting Browsers


Element chrome browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser Safari
<canvas> Yes Yes Yes Yes Yes

HTML Canvas Tag with JavaScript

Draw a Line

moveTo(x,y): It is used to define the starting point of the line.

lineTo(x,y): It is used to define the ending point of the line.


<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="400" height="200" style="border:1px solid #cccccc;">
      The HTML5 canvas tag is not supported by your browser.
    </canvas>
    <script>
      var c = document.getElementById("exampleCanvas");
      var ctx = c.getContext("2d");
      ctx.moveTo(0, 0);
      ctx.lineTo(400, 200);
      ctx.strokeStyle = '#ff7b7b';
      ctx.stroke();
    </script>
  </body>
</html>

Output :


Draw a Circle


arc(x, y, r, start, stop)

<!DOCTYPE html>
<html>
  <head>
    <title>Draw a circle</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="200" height="200" style="border:1px solid #dddddd;">
      HTML5 canvas tag is not supported by your browser..
    </canvas>
    <script>
      var c = document.getElementById("exampleCanvas");
      var ctx = c.getContext("2d");
      ctx.beginPath();
      ctx.arc(100, 100, 60, 0, 2 * Math.PI);
      ctx.strokeStyle = '#ff7b7b';
      ctx.stroke();
    </script>
  </body>
</html>

 


Output :


Draw a Text 

font property: It is used to define the font property for the text.

fillText(text,x,y) method: It is used to draw filled text on the canvas. It looks like a bold font.

strokeText(text,x,y) method: It is also used to draw text on the canvas, but the text is unfilled.


<!DOCTYPE html>
<html>
  <head>
    <title>Draw a Text</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="350" height="110" style="border:1px solid #dddddd;">
      HTML5 canvas tag is not supported by your browser.
    </canvas>
    <script>
      var c = document.getElementById("exampleCanvas");
      var ctx = c.getContext("2d");
      ctx.font = "40px Arial";
      ctx.fillStyle = '#ff7b7b';
      ctx.fillText("Canvas Text", 55, 65);
    </script>
  </body>
</html>

Output :


Draw Linear Gradient

<!DOCTYPE html>
<html>
  <head>
    <title>Draw Linear Gardient</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="300" height="140" style="border:1px solid #dddddd;">
      The HTML5 canvas tag is not supported by your browser.
    </canvas>
    <script>
      var c = document.getElementById("exampleCanvas");
      var ctx = c.getContext("2d");
      var grd = ctx.createLinearGradient(0, 0, 300, 0);
      grd.addColorStop(0, "#ff7b7b");
      grd.addColorStop(1, "#ffffff");
      ctx.fillStyle = grd;
      ctx.fillRect(20, 20, 250, 100);
    </script>
  </body>
</html>

Output :


Draw Circular Gradient

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="260" height="160" style="border:1px solid #cdcdcd;">
      The HTML5 canvas tag is not supported by your browser.
    </canvas>
    <script>
      var c = document.getElementById("exampleCanvas");
      var ctx = c.getContext("2d");
      var grd = ctx.createRadialGradient(150, 75, 10, 115, 90, 150);
      grd.addColorStop(0, "#ff7b7b");
      grd.addColorStop(1, "white");
      ctx.fillStyle = grd;
      ctx.fillRect(20, 20, 220, 120);
    </script>
  </body>
</html>

Output :