Canvas2D text metricsd do not work at small scales in Chrome

README.md

Canvas2D text metricsd do not work at small scales in Chrome

view on jsgist

index.css

/*bug-in-github-api-content-can-not-be-empty*/

index.html

<canvas width="64" height="64"></canvas>

index.js

const ctx = document.querySelector('canvas').getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);


function drawCenteredTextAtPoint(ctx, text, x, y) {
    const metrics = ctx.measureText(text);

    const drawX = x - (metrics.actualBoundingBoxLeft + metrics.actualBoundingBoxRight) / 2 + metrics.actualBoundingBoxLeft;
    const drawY = y + (metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent) / 2 - metrics.actualBoundingBoxDescent;

    ctx.save();
    ctx.textAlign = "left";
    ctx.textBaseline = "alphabetic";
    ctx.fillText(text, drawX, drawY);
    ctx.restore();
}

ctx.translate(32, 32);
ctx.scale(32, 32);
ctx.fillStyle = 'yellow';
ctx.font = '1.5px monospace';
drawCenteredTextAtPoint(ctx, '1x', 0, 0);

jsGist.json

{"name":"Canvas2D text metricsd do not work at small scales in Chrome","settings":{},"filenames":["index.html","index.css","index.js"]}