window.ENTITIES={'/api/snippets/html/javascript%20-%20measure%20text%20size%20on%20html%20canvas%20element':[{"result":true,"message":null,"batch":{"type":"html","name":"javascript - measure text size on html canvas element","items":[{"id":"jvyqnp","type":"html","name":"JavaScript - measure text size on HTML canvas element","content":"// ONLINE-RUNNER:browser;\n\n<canvas class=\"canvas\" id=\"canvas\" width=\"100\" height=\"50\"></canvas>\n\n<script>\n\n    const canvas = document.querySelector('#canvas');\n    const context = canvas.getContext('2d');\n\n    context.font = '10px serif';\n\n    const metrics = context.measureText('Hello, World!');\n\n    const textWidth = metrics.width;\n    const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;  // it measures text height according to currently used characters\n\n    console.log('text width:  ' + textWidth  + 'px');\n    console.log('text height: ' + textHeight + 'px');\n\n</script>","source":"","author":{"id":"505Y10","name":"Wiktor-Sribiew","avatar":"1629126875612__505Y10__w40px_h40px.jpg","points":830,"role":"BASIC"},"creationTime":1741374942000,"updateTime":1741375135000,"removalTime":null},{"id":"jm5r2j","type":"html","name":"JavaScript - measure text size on HTML canvas element","content":"// ONLINE-RUNNER:browser;\n\n<canvas class=\"canvas\" id=\"canvas\" width=\"100\" height=\"50\"></canvas>\n\n<script>\n\n    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    // Usage example:\n\n    const canvas = document.querySelector('#canvas');\n    const context = canvas.getContext('2d');\n\n    context.font = '10px serif';\n\n    const size = measureText(context, 'Hello, World!');\n\n    console.log('text width:  ' + size.width  + 'px');\n    console.log('text height: ' + size.height + 'px');\n\n</script>","source":"","author":{"id":"4o2mQa","name":"Kevin","avatar":"1629141224994__4o2mQa__w40px_h40px.jpg","points":797,"role":"BASIC"},"creationTime":1741375104000,"updateTime":1741375119000,"removalTime":null}]}}]};