TAG
CSS
JavaScript
Result
Run
License
<input type="range" id="font-size" value="40" min="10" max="80" /> <canvas id="mycanvas" width="200" height="100"></canvas> <p> Solid: fontBoundingBoxDescent<br />Dash: actualBoundingBoxDescent </p>
canvas { border: 1px solid #CCC; display: block; margin-top: 10px; }
window.addEventListener("load", function() { const elFontSize = document.getElementById("font-size"); const elCanvas = document.getElementById("mycanvas"); let context = elCanvas.getContext("2d"); let text = "Hello", textHeight = 80; elFontSize.addEventListener("input", draw); function draw(e) { let fontSize = e.currentTarget.value; context.clearRect(0, 0, elCanvas.width, elCanvas.height); context.beginPath(); context.font = `${fontSize}px consolas`; context.fillText(text, 20, textHeight); let textMetrics = context.measureText(text); let actualBottom = parseInt(textMetrics.actualBoundingBoxDescent); let fontBottom = parseInt(textMetrics.fontBoundingBoxDescent); let textBoxRight = textMetrics.actualBoundingBoxRight; context.moveTo(20, textHeight + actualBottom); context.lineTo(20 + textBoxRight, textHeight + actualBottom); context.setLineDash([5]); context.strokeStyle = "#0000FF"; context.stroke(); context.beginPath(); context.moveTo(20, textHeight + fontBottom); context.lineTo(20 + textBoxRight, textHeight + fontBottom); context.setLineDash([]); context.strokeStyle = "#FF0000"; context.stroke(); } elFontSize.dispatchEvent(new Event("input")); });
Console
expand_less
License
License
by DevDic
Close