Canvas measureText() Method

Watch a demo of different values of the measureText() method.

Or click a specific value to see the result:

measureText('Hello World');
measureText('How are you?');
measureText('It is a great day!');
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 Arial';
const m=ctx.measureText('How are you?');
ctx.fillText(m.width,10,30);

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