Отключение сглаживания при чертеже на HTML <canvas>

Быстрый ответ

Для того чтобы отменить сглаживание на элементе HTML <canvas>, нужно сделать так, чтобы свойство imageSmoothingEnabled у 2D контекста имело значение false. Заключается в этом обеспечение отрисовки изображений, фигур и текстов без искажений и размытия при масштабировании.

// Получаем контекст холста
const ctx = document.querySelector('canvas').getContext('2d');

// Отключаем сглаживание
ctx.imageSmoothingEnabled = false;

// Теперь можно рисовать с большей чёткостью!
ctx.drawImage(image, pixelX, pixelY, pixelWidth, pixelHeight);
ctx.fillText('Текст без сглаживания', pixelX, pixelY); // Теперь каждый пиксель будет заметен!

Используйте точные пиксельные координаты и избегайте переплетения пикселей для достижения совершенной чёткости.

Точное позиционирование пикселей

Чтобы намалевать однопиксельные линии, стоит корректировать координаты таким образом, чтобы они оканчивались на *.5. Этот метод позволит достичь выравнивания по пиксельной сетке и создать стиль в духе пиксель-арта.

// Устанавливаем толщину линии в один пиксель для создания эффекта "ретро"
ctx.lineWidth = 1;

// Рисуем линии с учётом пиксельной сетки
ctx.beginPath();
ctx.moveTo(10.5, 10.5);
ctx.lineTo(10.5, 100.5);
ctx.stroke(); // Получаем линии в стиле старых добрых игр!

Управление краями с помощью смещения канваса

Можно улучшить чёткость рисуемых линий, сместив холст на полпикселя с помощью функции translate. После того как однопиксельные линии будут нарисованы, смещение можно отменить, вернув холст в исходное положение.

// Сдвигаем холст на полпикселя
ctx.translate(0.5, 0.5);

// Рисуем чёткую однопиксельную линию
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.stroke(); 

// Возвращаем холст в исходное положение
ctx.translate(-0.5, -0.5);

Когда стоит корректировать координаты

Не всегда имеет смысл корректировать координаты. Нужно принимать это решение исходя из того, являются ли изображения на холсте статичными, и какой визуальный стиль вы хотите воплотить на нем. При работе с динамичным и адаптивным контентом надо обдуманно использовать описанные методы, чтобы обеспечить оптимальную чёткость при разных разрешениях и масштабах.

Визуализация

Представим борьбу со сглаживанием <canvas> как картины:

Ручки с острым грифелем (✏️): Обеспечивают чёткие линии, без сглаживания.
Смягчители для краёв (🌀): Сглаживают края для придания мягкости изображению.

Для отключения сглаживания:

Элемент canvas (🖼️):
Только ✏️ пригодны, чтобы добиться чёткого и точного изображения.

Отключив сглаживание, вы превращаете <canvas> в мастерскую точной графики.

Сглаживание:    🌀 (Включено – это обычная практика)
Без сглаживания: ✏️ (Отключено – реже встречается, но дарит пиксельную точность)

context.imageSmoothingEnabled = false; // Пока, сглаженные края. Привет, чётке линии!

Работа со фигурами и текстом

Формируем рисунок самостоятельно

Рисуя круги и кривые, имейте в виду, что координаты и размеры должны быть целыми числами, а imageSmoothingEnabled — выключен. Вот так выглядит круг, нарисованный по всем правилам:

// Круги, следующие пиксельному протоколу!
ctx.beginPath();
ctx.arc(50, 50, 20, 0, Math.PI * 2); // Игнорируем субпиксели!
ctx.closePath();
ctx.fill(); // Превосходно!

Подробнее об этом расскажет наш спикер на видео

Рисуем текст: точность каждого пикселя

И текст может быть нарисован с максимальной пиксельной чёткостью. Для получения идеального изображения используйте шрифты с пиксельным размером и выравнивайте текст в соответствии со сеткой. Стоит отметить, что imageSmoothingEnabled не влияет на отрисовку текста — здесь всё зависит от выбора шрифта и его позиционирования.

```javascript