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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<canvas class="canvas" id="canvas" width="100" height="50"></canvas>

<script>

    const measureText = (context, text) => {
        const metrics = context.measureText(text);
        return {
            width: metrics.width,
            height: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent  // it measures text height according to currently used characters
        };
    };


    // Usage example:

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

    context.font = '10px serif';

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

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

</script>