window.ENTITIES={'/api/snippets/javascript/javascript%20-%20measure%20text%20size%20on%20html%20canvas%20element':[{"result":true,"message":null,"batch":{"type":"javascript","name":"javascript - measure text size on html canvas element","items":[{"id":"1e5XM1","type":"javascript","name":"JavaScript - measure text size on HTML canvas element","content":"// ONLINE-RUNNER:browser;\n\nconst measureText = (context, text) => {\n    const metrics = context.measureText(text);\n    return {\n        width: metrics.width,\n        height: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent  // it measures text height according to currently used characters\n    };\n};\n\n\n\n// Usage example:\n\nconst canvas = document.createElement('canvas');\nconst context = canvas.getContext('2d');\n\ncontext.font = '10px serif';\n\nconst size = measureText(context, 'Hello, World!');\n\nconsole.log('text width:  ' + size.width  + 'px');\nconsole.log('text height: ' + size.height + 'px');","source":"","author":{"id":"Zon7K0","name":"Mikolaj","avatar":"1629141594613__Zon7K0__w40px_h40px.jpg","points":519,"role":"BASIC"},"creationTime":1741375215000,"updateTime":1741375238000,"removalTime":null},{"id":"prE33D","type":"javascript","name":"JavaScript - measure text size on HTML canvas element","content":"const measureText = (context, text) => {\n    const metrics = context.measureText(text);\n    return {\n        width: metrics.width,\n        height: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent  // it measures text height according to currently used characters\n    };\n};\n\n\n\n// Usage example:\n\nconst context = ...\n\ncontext.font = '10px serif';\n\nconst {width, height} = measureText(context, 'Hello, World!');","source":"","author":{"id":"r0e8Ao","name":"Blessing-D","avatar":"1629030393322__r0e8Ao__w40px_h40px.png","points":574,"role":"BASIC"},"creationTime":1741375395000,"updateTime":1741375401000,"removalTime":null}]}}]};