HTML <canvas> Tag

A <canvas> with roaming creatures eating red particles.

<canvas id="mycanvas" width="400" height="250">
</canvas>

<script>
  // see JavaScript code in Live Editor
</script>

A rectangle that is drawn inside a <canvas> with JavaScript.

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

<script>

  ( () => {

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

    context.fillStyle = "lightblue";
    context.fillRect(10, 10, 100, 100);
    
  } )();
  
</script>

Code Explanation

• <canvas> - creates a canvas container for graphics.
• getElementById("canvas") - get the canvas element with a given id.
• getContext("2d") - creates a 2d context to draw graphics in the canvas element
• fillStyle - sets the canvas background color
• fillRect - sets the canvas position and size
  • The first parameter sets the top position.
  • The second parameter sets the left position.
  • The third parameter sets the canvas width.
  • The last parameter sets the canvas height.
• The JavaScript is a self-executing anonymous lambda expression.

Note: A canvas element has only one context which is either 2d or 3d. Calling getContext() on a canvas multiple times returns the same context object.

Note: 3d graphics is implemented through WebGL which is an advanced 3d graphic system with different drawing functions. To create a WebGL context use getContext("webgl").

To see what is possible with <canvas> and WebGL follow this link to codepen.io.

This table lists the <canvas> attributes.

For additional global attributes see our global attributes list.

Tip: When sizing the canvas use the width and height attributes instead of CSS.
Resizing with CSS can create distorted graphics.

An alternative to <canvas> is <svg>.
To see which one is appropriate for your project here is a comparison.

Canvas

• Canvas uses Javascript to draw graphics.
• Once it's drawn, the browser will forget about it.
• If something in the image changes, then JavaScript needs to redraw the entire scene.
  
  

SVG

• SVG is natively used for scalable graphics.
• SVG is XML based, which means each element is created using the SVG DOM.
• Each drawn shape is remembered as an object. Once an object changes, the browser re-renders the shape.

A side-by-side comparison with additional details:

<canvas id="imgcanvas" style="display:none;" height="70"></canvas>

<script>
  
  ( () => {
    let canvas = document.getElementById("imgcanvas");
    let context = canvas.getContext("2d");

    context.fillStyle = "orangered";
    context.fillRect(0, 0, 70, 70);

    context.fillStyle = "purple";
    context.fillRect(20, 20, 30, 30);
  
    let img = canvas.toDataURL('image/png');
    document.write('<img src="' + img + '" />');
  } )();
  
</script>

The <canvas> tag is part of a group of tags that create multi-media experiences on the web. This group is referred to as the Media tag group. Together, they allow you to create powerful multi-media solutions.

Here is a list of media tags.

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

• Our HTML svg Tag Reference
• Our HTML img Tag Reference
• Our CSS Images Tutorial