Canvas fillText() Method

Example

Write "Hello world!" and "Big smile!" (with gradient) on the canvas, using fillText():

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.font = "20px Georgia";
ctx.fillText("Hello World!", 10, 50);
ctx.font = "30px Verdana";

// Create gradient
const gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");

// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Big smile!", 10, 90);

Try it Yourself »

Description

The fillText() method draws filled text on the canvas.

The default fillStyle is #000000 (solid black).

Se Also:

The font Property (Set text font and size)

The fillStyle Property (Set text color/gradient)

The textAlign Property (Set text alignment)

The textBaseline Property (Set text baseline)

The strokeText() Method (Draw the text)

Syntax

context.fillText(text, x, y, maxWidth)

Parameter Values

Param	Description	Play it
text	The text to write on the canvas	Play it »
x	The x coordinate to start the text	Play it »
y	The y coordinate to start the text	Play it »
maxWidth	(Optional) The maximum text width in pixels	Play it »

Return Value

NONE

Browser Support

The <canvas> element is an HTML5 standard (2014).

fillText() is supported in all modern browsers:


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

❮ Canvas Reference