0

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>

1 ответ 1

1

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');

drawText(ctx, "Текст 123", 100, 30, "22px system-ui, sans-serif");
drawText(ctx, "Текст 123", 101, 60, "20px system-ui, sans-serif");
drawText(ctx, "Текст 123", 102, 90, "18px system-ui, sans-serif");
drawText(ctx, "Текст 123", 103, 120, "16px system-ui, sans-serif");
canvas {
  width: 300px;
  height: 100px;
  border: 1px solid #000;
}
<canvas></canvas>

Если не подойдет сообщите пожалуйста

2
  • Шрифт почему то стал в 2 раза больше
    – Meru382
    Commented 25 янв. 2022 в 16:13
  • @Meru382 Изменил код, если не подходит, все что мог:)
    – pyduti
    Commented 25 янв. 2022 в 16:34

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.