TAG
CSS
JavaScript
Result
Run
License
<input type="range" id="font-size" value="40" min="10" max="80" /> <canvas id="mycanvas" width="300" height="100"></canvas> <p id="console"></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"); const elConsole = document.getElementById("console"); 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 textBoxHeight = textMetrics.actualBoundingBoxAscent; let textBoxLeft = textMetrics.actualBoundingBoxLeft; let textBoxWidth = textMetrics.width; let aBox = [ 20 - textBoxLeft, textHeight - textBoxHeight, textBoxWidth, textBoxHeight ]; context.rect(aBox[0], aBox[1], aBox[2], aBox[3]); context.strokeStyle = "#FF0000"; context.stroke(); elConsole.textContent = `width: ${textBoxWidth}`; } elFontSize.dispatchEvent(new Event("input")); });
Console
expand_less
License
License
by DevDic
Close