JavaScript - measure text size on HTML canvas element

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<canvas class="canvas" id="canvas" width="100" height="50"></canvas>

<script>

    const canvas = document.querySelector('#canvas');
    const context = canvas.getContext('2d');

    context.font = '10px serif';

    const metrics = context.measureText('Hello, World!');

    const textWidth = metrics.width;
    const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;  // it measures text height according to currently used characters

    console.log('text width:  ' + textWidth  + 'px');
    console.log('text height: ' + textHeight + 'px');

</script>