2 и 4 запись смазаны, так как смещение идет не по пиксельно, там доли пикселей, например 1.5px. была увеличена четкость через offsetWidth * 2
но этого не достаточно.
Как сделать смещение ровной части пикселей, неважно можно в большую или в меньшую сторону, и не зависимо какой размер смещения задан.
Главное что нужно решить чтобы был всегда четкий текст и цифры
function drawText(ctx, text, x, y, font) {
ctx.fillStyle = "#000000";
ctx.font = font;
ctx.textAlign = "left";
ctx.fillText(text, x, y);
}
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
canvas.style.width = canvas.offsetWidth +'px';
canvas.style.height = canvas.offsetHeight +'px';
canvas.width = canvas.offsetWidth * 2;
canvas.height = canvas.offsetHeight * 2;
drawText(ctx, "Текст 123", 100, 30, "22px system-ui, sans-serif");
drawText(ctx, "Текст 123", 101, 60, "22px system-ui, sans-serif");
drawText(ctx, "Текст 123", 102, 90, "22px system-ui, sans-serif");
drawText(ctx, "Текст 123", 103, 120, "22px system-ui, sans-serif");
canvas {
width: 200px;
height: 100px;
border: 1px solid #000;
}
<canvas></canvas>