HTML-элемент <canvas> часто используется для рисования интерактивной графики, визуализации данных, или даже простых эффектов. Но многие разработчики сталкиваются с неожиданным поведением: изображение смещается, масштаб не соответствует ожиданиям, или картинка получается мыльной.
Разберёмся в причине и как это исправить.
Проблема кроется в том, что у канваса два набора размеров.
Первый размер — это тот, что задаётся в CSS. Он управляет визуальной составляющей, тем сколько canvas занимает на странице места.
Вторые размеры — это пиксельный размеры внутренней рабочей области рисования. Когда вы рисуете на canvas, именно эти размеры и определяют максимальные позиции x, y, которые видны. Они задаются атрибутами тега canvas — width и height.
По умолчанию эти размеры 300×150.
Например:
|
1 |
<canvas style="width: 400px; height: 400px;"></canvas> |
Визуально блок занимает 400×400 пикс, но его API размеры для рисования 300×150 точек. Если это не учитывать, искажение пропорций и размытая графика гарантированы как результат.
Чтобы этого не происходило, обязательно синхронизируйте размеры.
|
1 2 3 4 5 |
<canvas width="400" height="400" style="width: 400px; height: 400px;"> </canvas> |