HTML Canvas

A canvas in HTML is an area where graphics can be drawn with Javascript. The <canvas> tag creates the graphic container and JavaScript then draws paths, shapes, text, images, etc. inside this container.

HTML Tutorial

Example

A <canvas> element with JavaScript drawing code.

<canvas id="can-id" width="120" height="120"></canvas>

<script>

  ( () => {

    let canvas = document.getElementById("can-id");
    let context = canvas.getContext("2d");

    context.fillStyle = "orangered";
    context.fillRect(10, 10, 100, 100);

    context.fillStyle = "purple";
    context.fillRect(30, 30, 60, 60);
    
  } )();
  
</script>

Using canvas

The <canvas> tag creates a graphics container of a given width and height.

JavaScript draws shapes, such as lines, circles, text, and images inside the container.

Canvas supports advanced drawing functions including shapes, clipping, transformations, and more.


Drawing a line with Canvas

#

Using moveto,  lineto, and stroke functions to draw a diagonal line across the canvas.

<canvas id="canvas1" width="200" height="100" 
        style="border:1px solid slategray;">
</canvas>

<script>

  (() => {

    let canvas = document.getElementById("canvas1");
    let context = canvas.getContext("2d");

    context.moveTo(0, 0);
    context.lineTo(200, 100);
    context.stroke();

  })();
  
</script>

Drawing a circle with Canvas

#

Using beginPath,  arc, and stroke functions to draw a circle on the canvas.

<canvas id="canvas2" width="200" height="100" 
        style="border:1px solid slategray;">
</canvas>

<script>

  (() => { 

    let canvas = document.getElementById("canvas2");
    let context = canvas.getContext("2d");

    context.beginPath();
    context.arc(95, 50, 40, 0, 2 * Math.PI);
    context.stroke();

  })();
  
</script> 

Drawing text with Canvas

#

Using the fillText function to draw text on a canvas.

<canvas id="canvas3" width="200" height="100" 
        style="border:1px solid slategray;">
</canvas>

<script>

  (() => {

    let canvas = document.getElementById("canvas3");
    let context = canvas.getContext("2d");

    context.font = "28px Arial";
    context.fillText("Hello Canvas", 10, 50);

  })();
  
</script>

Drawing stroke text with Canvas

#

Using the strokeText function to draw stroke text (i.e. vector-based text) on the canvas.

<canvas id="canvas4" width="200" height="100" 
        style="border:1px solid slategray;">
</canvas>

<script>

  (() => {

    let canvas = document.getElementById("canvas4");
    let context = canvas.getContext("2d");

    context.font = "28px Arial";
    context.strokeText("Hello Canvas", 10, 50);
    
  })();
</script>

Drawing a linear gradient color with Canvas

#

This example fills a rectangle with a linear color gradient.

JavaScript first creates a linear color gradient with createLinearGradient and addColorStop.
This gradient it then used to fill and draw the rectangle with the fillRect function.

<canvas id="canvas5" width="200" height="100" 
        style="border:1px solid slategray;">
</canvas>

<script>

  (() => { 

    let canvas = document.getElementById("canvas5");
    let context = canvas.getContext("2d");
    
    let gradient = context.createLinearGradient(0, 0, 200, 0);
    gradient.addColorStop(0, "lightblue");
    gradient.addColorStop(1, "white");
    
    context.fillStyle = gradient;
    context.fillRect(10, 10, 150, 80);

  })();
  
</script>

Drawing a circular gradient color with Canvas

#

This example fills a rectangle with a circular color gradient.

JavaScript first creates a circular color gradient with createCircularGradient and addColorStop.
This gradient it then used to fill and draw the rectangle with the fillRect function.

<canvas id="canvas6" width="200" height="100" 
        style="border:1px solid slategray;">
</canvas>

<script>

  (() => {

    let canvas = document.getElementById("canvas6");
    let context = canvas.getContext("2d");

    let gradient = context.createRadialGradient(75, 50, 5, 90, 60, 100);
    gradient.addColorStop(0, "lightblue");
    gradient.addColorStop(1, "white");
    
    context.fillStyle = gradient;
    context.fillRect(10, 10, 150, 80);

  })();
  
</script>

Did you know?

Did you know?

Using canvas to create fast animations

Canvas is very fast, which allows you to create interesting animations.
Below is an animation of the solar system created with <canvas>, CSS, and JavaScript.

Animation courtesy of www.mozilla.org.


Browser Support

Here is when <canvas> support started for each browser:

Chrome
4.0 Jan 2010
Firefox
2.0 Oct 2006
IE/Edge
9.0 Mar 2011
Opera
9.0 Jun 2006
Safari
3.1 Mar 2008

For more information on <canvas>, see our HTML canvas Tag Reference.


You may also like

Guides