Canvas font Property

Watch a demo of different values of the font property.

Or click a specific value to see the result:

font = '30px Arial';
font = '30px Verdana';
font = '30px Times New Roman';
font = '30px Courier New';
font = '30px serif';
font = '30px sans-serif';
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
const c = document.getElementById('myCanvas');
const ctx = c.getContext('2d');
ctx.font='30px Verdana';
ctx.fillText('Hello World',10,30);

Play more with the code in our Tryit yourself editor: Try it Yourself ❯