HTML <canvas> Tag

The <canvas> tag is a graphic container where graphics can be drawn with JavaScript. Canvas is a good choice for graphic-intensive game development.

HTML Tag

Example

#

A <canvas> with roaming creatures eating red particles.

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

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

Using <canvas>

The <canvas> tag is a container which can render 2D and 3D graphics using JavaScript.

It can render lines, circles, rectangles, polygons, bitmap images, text, and more.

If the browser does not support canvas, the text inside the <canvas> element will display.

More Examples

A rectanglular shape 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.


Attributes for <canvas>

This table lists the <canvas> attributes.

Attribute Value Description
height pixels Canvas height in pixels. Default is 150.
width pixels Canvas width in pixels. Default is 300.
id    identifier Defines a unique identifier for the canvas.
class    classnames Sets one or more CSS classes to be applied to the canvas.
style    CSS-styles Sets the style for the canvas.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the canvas is hidden.
title    text Sets a title that displays as a tooltip.

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.


Canvas versus SVG

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 SVG
  • Resolution dependent
  • Event handlers not supported
  • Poor text rendering capabilities
  • Images can be saved in .png or .jpg formats.
  • Well suited for graphic-intensive games or real-time charts
  • Resolution independent (scalable)
  • Supports event handlers
  • Best suited for applications with large rendering areas such as Google Maps
  • Slow rendering if complex graphics are drawn
  • Not suited for game applications

Did you know?

Did you know?

Converting a canvas into an image

A drawn canvas can be converted into an HTML image (e.g. png) using JavaScript.

Once converted you can use the image like any other image.

A hidden <canvas> that generates a bitmap image.
What you see is a dynamically created image rendered as an <img> element.

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

Media Tags

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, these tags allow you to create powerful multi-media solutions.

Here is a list of media tags.

Element Description
<audio> Creates a player for sound such as music, sound effects, or others
<video> Creates a video player on a page
<source> Adds a media source for a <video>, <audio>, or <picture>
<track> Adds a text track, such as, subtitles and captions, to the media
<embed> Creates a container for an external resource
<iframe> Creates a frame in which another web page can be embedded
<svg> Displays an scalable vector image
<canvas> Creates a graphics container where JavaScript can draw
<img> Displays an image
<area> Specifies a map area for an image
<map> Defines a client-side image map, i.e. an image with clickable areas
<figure> Displays self-contained content, usually an image
<figcaption> Adds a caption to a <figure> (image) element

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

You may also like

Guides