metrics

by aio350

HTML

<canvas width="300" height="300" style="border: 1px dotted #222"></canvas>

CSS

body {
  margin: 0;
  height: 100vh;
  background: radial-gradient(circle, skyblue, steelblue);
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

const canvas = document.querySelector('canvas')
const $ = canvas.getContext('2d')

const x = canvas.width / 2
const y = canvas.height / 2
const text = 'CANVAS'

$.font = '30pt Calibri'
$.textAlign = 'center'
$.fillStyle = 'red'
$.fillText(text, x, y)

const metrics = $.measureText(text)
const w = Math.trunc(metrics.width)

$.font = '20pt Calibri'
$.fillStyle = 'green'
$.fillText(`(${w}px wide)`, x, y + 40)