Earn income with your HTML skills

Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.

HTML <canvas> title Attribute

HTML <button>

HTML <caption>

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: or .

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

#

Back to <canvas>

Jack Poorte

Last updated on Sep 30, 2023