TAG
CSS
JavaScript
Result
Run
License
<canvas id="mycanvas" width="200" height="100"></canvas>
canvas { border: 1px solid #CCC; display: block; margin-top: 10px; }
window.addEventListener("load", function() { const elCanvas = document.getElementById("mycanvas"); let context = elCanvas.getContext("2d"); let text = "Hello"; context.beginPath(); context.font = "20px consolas"; context.fillText(text, 20, 30); let textMetrics = context.measureText(text); let lineHeight = parseInt(textMetrics.fontBoundingBoxDescent); context.beginPath(); context.moveTo(20, 30 + lineHeight); context.lineTo(20 + textMetrics.actualBoundingBoxRight, 30 + lineHeight); context.strokeStyle = "#FF0000"; context.stroke(); });
Console
expand_less
License
License
by DevDic
Close