fillText method
Renders filled text to the canvas by using the current fill style and font.
![]() ![]() |
Syntax
CanvasRenderingContext2D.fillText(text, x, y, maxWidth);Parameters
- text [in]
-
Type: string
The text characters to paint on the canvas.
- x [in]
-
Type: number
The horizontal coordinate to start painting the text at, relative to the canvas.
- y [in]
-
Type: number
The vertical coordinate to start painting the text, relative to the canvas.
- maxWidth [in, optional]
-
Type: number
The maximum possible text width. If the value is less than the width property, the text is scaled to fit.
Return value
This method does not return a value.
Exceptions
| Exception | Condition |
|---|---|
|
The current font is not of the same origin or domain as the document that owns the canvas element. |
Standards information
- HTML Canvas 2D Context, Section 11
Examples
The following code example paints text that is filled with a linear gradient.
<html> <head> <title>Fill Text Test</title> <script type="text/javascript"> function draw() { var canvas = document.getElementById("MyCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); // Add the colors with fixed stops at 1/4 of the width. gradient.addColorStop("0", "magenta"); gradient.addColorStop(".25", "blue"); gradient.addColorStop(".50", "green"); gradient.addColorStop(".75", "yellow"); gradient.addColorStop("1.0", "red"); // Use the gradient. ctx.font = "italic 200 36px/2 Unknown Font, sans-serif" ctx.fillStyle = gradient; var i; for (i = 0; i < 450; i += 50) { ctx.fillText("Hello World", i, i); } } } </script> </head> <body onload="draw();"> <canvas id="MyCanvas" width="600" height="500">Canvas not supported in this mode or browser.</canvas> </body> </html>
See also
Show:

