This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

fillText

Summary

Renders the given text at the given (x, y) coordinates, ensuring that the text isn’t wider than maxWidth (if specified), using the current font, textAlign, and textBaseline values.

Method of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D

Syntax

var object = object.fillText(text, x, y, maxWidth);

Parameters

text

Data-type
String

The text characters to paint on the canvas.

x

Data-type
Number

The horizontal coordinate to start painting the text at, relative to the canvas.

y

Data-type
Number

The vertical coordinate to start painting the text, relative to the canvas.

maxWidth

Data-type
Number

(Optional)

The maximum possible text width. If the value is less than the width property, the text is scaled to fit.

Return Value

Returns an object of type DOM NodeDOM Node

Type: HRESULT

This method can return one of these values.

Return codeDescription
S_OKThe operation completed successfully.
SecurityErrorThe current font is not of the same origin or domain as the document that owns the canvas element.

Examples

This example sets a font for upcoming text, then places the value of a string variable onto the canvas.

<canvas id="myCanvas" width="300" height="150" style="border:1px solid blue;"></canvas>
<p>. . .</p>
<script>
var can = document.getElementById("myCanvas");
var ctxt = can.getContext("2d");
var text = "Hello, world.";
ctxt.font="24px Verdana";
ctxt.fillText(text, 50, 75);
</script>

Related specifications

W3C HTML Canvas 2D Context
W3C Candidate Recommendation

Attributions