Я очень очень простая логика рендеринга c:
context.translate(
element.x + sceneState.scrollX,
element.y + sceneState.scrollY
);
renderElement(element, rc, context);
context.resetTransform();
Вот GIF-файл того, что происходит при использовании Retina Macbook Pro:
Изменение context.resetTransform()
на ручной возврат перевода устраняет проблему:
context.translate(
element.x + sceneState.scrollX,
element.y + sceneState.scrollY
);
renderElement(element, rc, context);
context.translate(
-element.x - sceneState.scrollX,
-element.y - sceneState.scrollY,
);
Может кто-нибудь объяснить, почему это происходит и есть ли способ установить матрицу идентичности без выполнения «отрицательного перевода»? Я просто хочу упомянуть, что это происходит ТОЛЬКО на дисплее Retina. Я протестировал его с внешним монитором 1080p, и все работает нормально.