HTML <canvas> data-* Attribute

The data-* attribute on a <canvas> tag attaches additional data to the canvas. To create a custom attribute, replace the * with a lowercase string, such as data-id, data-status, or data-location.

Example

#

A custom data-pallete attribute on a <canvas> element.
The attribute value is not visible, but is readable by JavaScript.

<canvas data-pallete="ocean"
        id="canvas" width="120" height="120"></canvas>

<script>

 ( () => {

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

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

    context.fillStyle = "cadetblue";
    context.fillRect(35, 10, 25, 100);

    context.fillStyle = "mediumturquoise";
    context.fillRect(60, 10, 25, 100);

    context.fillStyle = "paleturquoise";
    context.fillRect(85, 10, 25, 100);

  } )();

</script>

Using data-*

The data-* attribute adds custom information to a <canvas> element.

The * part is replaced with a lowercase string, such as data-id, data-status, or data-location.

An <canvas> element can have any number of data-* attributes, each with their own name.

Using data-* attributes reduces the need for requests to the server.

Note: The data-* attribute is not visible and does not change the appearance of the canvas.


Syntax

<canvas data-*="value" >

Note: The * can be any string, such as data-iddata-costdata-supplier,  etc.


Values

#

Value Description
value A string value. Can be numeric, alphanumeric, JSON, etc.

More Examples

A custom data-palette attribute on a <canvas> element.
JavaScript reads the data-palette value, which is 'fire', and then draws rectangles with a fire colored palette.

<canvas data-palette="fire"
        id="mycanvas" width="120" height="120"></canvas>

<script>

 ( () => {

    let canvas = document.getElementById("mycanvas");
    let context = canvas.getContext("2d");
    let palette = canvas.getAttribute('data-palette');

    if (palette === "fire") {

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

      context.fillStyle = "red";
      context.fillRect(35, 10, 25, 100);

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

      context.fillStyle = "orange";
      context.fillRect(85, 10, 25, 100);

    } else if (palette === "ocean") {

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

      context.fillStyle = "cadetblue";
      context.fillRect(35, 10, 25, 100);

      context.fillStyle = "mediumturquoise";
      context.fillRect(60, 10, 25, 100);

      context.fillStyle = "paleturquoise";
      context.fillRect(85, 10, 25, 100);
    }

  } )();

</script>

Code explanation

The <canvas> tag contains the data-palette attribute.

The data-palette attribute specifies the palette for drawing the canvas.

JavaScript draws the properly colored rectangles into the canvas element.


Browser support

Here is when data-* 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

 Back to <canvas>
Guides