fillText

Jump to: navigation, search

fillText

This article is Ready to Use.

W3C Candidate Recommendation

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/CanvasRenderingContext2D

Syntax

var object = object.'(/* see parameter list */);

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 Node.

Type: HRESULT

This method can return one of these values.

Return code Description
S_OK The operation completed successfully.
SecurityError The 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.

HTML

<canvas id="myCanvas" width="300" height="150" style="border:1px solid blue;"></canvas>

. . .

<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

Specification Status Related Changes
W3C HTML Canvas 2D Context W3C Candidate Recommendation

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: Windows Internet Explorer API reference Article