Canvas font Property

Watch a demo of different values of the font property.

Or click a specific value to see the result:

font = '10px Arial';
font = '11px Arial';
font = '12px Arial';
font = '13px Arial';
font = '14px Arial';
font = '15px Arial';
font = '16px Arial';
font = '17px Arial';
font = '18px Arial';
font = '19px Arial';
font = '20px Arial';
font = '30px Arial';
font = '50px Arial';
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
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
your browser does not support the canvas tag
const c = document.getElementById('myCanvas');
const ctx = c.getContext('2d');
ctx.font='11px Arial';
ctx.fillText('Hello World',10,30);

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