HTML canvas fillText() Method

Example

let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");

ctx.font = "10px Monaco";
ctx.fillText("Hello World!", 10, 50);

ctx.font = "10px Monaco";

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

ctx.fillStyle = gradient;
ctx.fillText("Hello World 2!", 10, 100);

Try this code ❯

Meaning

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

Standard Syntax

JavaScript syntax:

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

Parameter Values

Parameter	Description
text	Specifies the text that will be written on the canvas.
x	Specifies the x coordinate where to start painting the text.
y	Specifies the y coordinate where to start painting the text.
maxWidth	Specifies the maximum allowed width of the text, in pixels. (Optional)