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
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 context = ...

context.font = '10px serif';

const {width, height} = measureText(context, 'Hello, World!');