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 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.
<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
Microsoft Developer Network: Windows Internet Explorer API reference Article