directory : /web/ : text-font-sizes.html

Directory path . web .

HTML Document File : text-font-sizes.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>font sizes</title>
</head>
<body>

<pre id=writeOut></pre>
<script>
function write(text){
    writeOut.textContent += text + "\n"
}
</script>

<canvas id="canvas1" width="10" height="10" style="border: 1px solid black;"></canvas> <br>

<script>
var canvas = document.getElementById('canvas1')
var context = canvas.getContext('2d')

function measureTextWidth(text){ // needs "context"
    var measure = Math.ceil( context.measureText(text).width )
    return measure
}

function testFont(font){
    write(font)
    context.font = font
    write(measureTextWidth("!")+","+measureTextWidth("E"))
}

testFont("30px monospace")
write("")
testFont("30px Arial")

</script>

<script src="/web/show-source.js"></script>

</body>
</html>