Разрыв между фигурами после масштабирования

Question

При использовании scale в HTML5 canvas я заметил, что иногда между элементами появляются небольшие промежутки. Например:

context.scale(0.995, 1);
context.fillRect(0, 0, 100, 100);
context.fillRect(100, 0, 100, 100);

Без масштаба два прямоугольника расположены рядом друг с другом, но с масштабом между ними есть небольшой разрыв. Есть ли способ избавиться от этого без округления масштабного коэффициента?

Answer 1

Как сказано в моем комментарии, это артефакт рендеринга из-за сглаживания.В качестве обходного пути вы можете использовать внеэкранный буфер, который вы визуализируете немасштабированным, а затем поместить это изображение на исходный холст с включенным правильным масштабированием.Если вы сделаете это, строка должна исчезнуть.

Следующий фрагмент может дать вам представление:

var buffer = document.createElement('canvas');
buffer.width = 200;
buffer.height = 100;
var context1 = buffer.getContext('2d');
context1.fillRect(0, 0, 100, 100);
context1.fillRect(100, 0, 100, 100);


var canvas = document.getElementById('canvasID');
var context = canvas.getContext('2d');
context.scale(0.995, 1);
context.drawImage(buffer, 0, 0);

context.fillRect(0, 120, 100, 100);
context.fillRect(100, 120, 100, 100);

Сравните два верхних прямоугольника в моем примере (внеэкранный рендеринг) с нижнимикоторые были нарисованы прямо на холсте.