After having seen how to apply styles and colors in the previous chapter, we will now have a look at how to draw text onto the canvas.
Drawing text
The canvas rendering context provides two methods to render text:
fillText(text, x, y [, maxWidth])
- Fills a given text at the given (x,y) position. Optionally with a maximum width to draw.
strokeText(text, x, y [, maxWidth])
- Strokes a given text at the given (x,y) position. Optionally with a maximum width to draw.
A fillText
example
The text is filled using the current fillStyle
.
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = '48px serif'; ctx.fillText('Hello world', 10, 50); }
<canvas id="canvas" width="300" height="100"></canvas>
draw();
A strokeText
example
The text is filled using the current strokeStyle
.
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = '48px serif'; ctx.strokeText('Hello world', 10, 50); }
<canvas id="canvas" width="300" height="100"></canvas>
draw();
Styling text
In the examples above we are already making use of the font
property to make the text a bit larger than the default size. There are some more properties which let you adjust the way the text gets displayed on the canvas:
font = value
- The current text style being used when drawing text. This string uses the same syntax as the CSS
font
property. The default font is 10px sans-serif. textAlign = value
- Text alignment setting. Possible values:
start
,end
,left
,right
orcenter
. The default value isstart
. textBaseline = value
- Baseline alignment setting. Possible values:
top
,hanging
,middle
,alphabetic
,ideographic
,bottom
. The default value isalphabetic
. direction = value
- Directionality. Possible values:
ltr
,rtl
,inherit
. The default value isinherit
.
These properties might be familiar to you, if you have worked with CSS before.
The following diagram from the WHATWG demonstrates the various baselines supported by the textBaseline
property.[[File:../../../../../../../html.spec.whatwg.org/images/baselines.png|The top of the em square is
roughly at the top of the glyphs in a font, the hanging baseline is
where some glyphs like आ are anchored, the middle is half-way
between the top of the em square and the bottom of the em square,
the alphabetic baseline is where characters like Á, ÿ,
f, and Ω are anchored, the ideographic baseline is
where glyphs like 私 and 達 are anchored, and the bottom
of the em square is roughly at the bottom of the glyphs in a
font. The top and bottom of the bounding box can be far from these
baselines, due to glyphs extending far outside the em square.]]
A textBaseline example
Edit the code below and see your changes update live in the canvas:
ctx.font = '48px serif'; ctx.textBaseline = 'hanging'; ctx.strokeText('Hello world', 0, 100);
Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);</textarea>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener('click', function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener('click', function() {
textarea.focus();
})
textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);
Advanced text measurements
In the case you need to obtain more details about the text, the following method allows you to measure it.
measureText()
- Returns a
TextMetrics
object containing the width, in pixels, that the specified text will be when drawn in the current text style.
The following code snippet shows how you can measure a text and get its width.
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var text = ctx.measureText('foo'); // TextMetrics object text.width; // 16; }
Gecko-specific notes
In Gecko (the rendering engine of Firefox, Firefox OS and other Mozilla based applications), some prefixed APIs were implemented in earlier versions to draw text on a canvas. These are now deprecated and removed, and are no longer guaranteed to work.
Drawing text by Mozilla Contributors is licensed under CC-BY-SA 2.5.