HTML <canvas> title Attribute

The title attribute on a <canvas> tag adds a tooltip with title text to the canvas element. Hovering the mouse over the canvas will display the tooltip.

Example

#

A title attribute on a <canvas> element.
Hover over the canvas to see the tooltip.

<canvas title="This is a nice&#10blue canvas."
        id="mycanvas" width="120" height="120">
</canvas>

<script>

   ( () => {

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

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

  } )();

</script>

Code explanation

  • The title attribute is placed in the <canvas> opening tag.
  • The value can be any string.
  • Hover the cursor over the canvas and after a second the tooltip appears.

Using title

The title attributes provides additional information about the <canvas> element.

The title value can be seen as tooltip text.

Tooltips are shown when the canvas element is hovered.


Syntax

<canvas title="value" >

Values

#

Value Description
value A string value. A title can span multiple lines by including newline or carriage-return characters:  &#10;  or  &#013;.

Browser support

Here is when title 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