font property
The font property sets the
font settings when it is drawn on
the canvas using the
fillText or
strokeText
methods. The method accepts the same
parameters as the CSS
font
property.
Syntax
context.font = font settings;
Example
Let's draw some text on the canvas with
fillText
and give it a size of 30px and
an Arial type with font:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillText('Hello world', 30, 50);
:
See also
-
the
textAlignproperty
that aligns a text horizontally -
the
textBaselineproperty
that aligns a text vertically
