Почему ваш canvas «съезжает» или выглядит размытым: невидимая ловушка размеров

HTML-элемент <canvas> часто используется для рисования интерактивной графики, визуализации данных, или даже простых эффектов. Но многие разработчики сталкиваются с неожиданным поведением: изображение смещается, масштаб не соответствует ожиданиям, или картинка получается мыльной.

Разберёмся в причине и как это исправить.

Проблема кроется в том, что у канваса два набора размеров.

Первый размер — это тот, что задаётся в CSS. Он управляет визуальной составляющей, тем сколько canvas занимает на странице места.

Вторые размеры — это пиксельный размеры внутренней рабочей области рисования. Когда вы рисуете на canvas, именно эти размеры и определяют максимальные позиции x, y, которые видны. Они задаются атрибутами тега canvas — width и height.

По умолчанию эти размеры 300×150.

Например:

Визуально блок занимает 400×400 пикс, но его API размеры для рисования 300×150 точек. Если это не учитывать, искажение пропорций и размытая графика гарантированы как результат.

Чтобы этого не происходило, обязательно синхронизируйте размеры.