HTML Reference Manual

HTML Tag Reference

HTML canvas fillText() method

fillText() is a Canvas 2D API at (x, y) position to fill text. If the fourth parameter of the option provides a maximum width, the text will be scaled to fit the maximum width.

HTML canvas reference manual

Online Example

Use fillText() to write text "Basic Tutorial Website!" and "oldtoolbag.com!":

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas fillText() method usage-Basic Tutorial(oldtoolbag.com)</title>/<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Basic Tutorial Website!",10,50);
ctx.font="30px Verdana";
//　Create a gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
//　Fill a gradient
ctx.fillStyle=gradient;
ctx.fillText("w"3codebox.com!10,90);
</script>
</body>
</html>

Test and see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9,Firefox, Opera, Chrome, and Safari support fillText() Method.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Note:Safari does not support the maxWidth parameter.

Definition and Usage

The fillText() method draws filled text on the canvas. The default text color is black (#000000).

Tip:Please use font Properties to define the font and size, and use fillStyle Properties in another color/Render text with a gradient.

JavaScript Syntax:	context.fillText(text,x,y,maxWidth);

Parameter Value

Parameter	Description
text	The text specified to be output on the canvas.
x	The x coordinate position where the text starts to be drawn (relative to the canvas).
y	The y coordinate position where the text starts to be drawn (relative to the canvas).
maxWidth	Optional. The maximum text width in pixels allowed.

HTML canvas reference manual

HTML: <template> tag