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

javascriptcontext.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:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.font = '30px Arial';
ctx.fillText('Hello world', 30, 50);

Результат:

See also