Отключение интерполяции при масштабировании <canvas> в JS

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

Для отключения интерполяции во время масштабирования элемента canvas, вы можете задать свойству imageSmoothingEnabled в контексте рисования значение false. Это даст возможность сохранить четкость изображения на холсте, даже при его изменении размеров.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
// Теперь вы можете масштабировать холст без потери четкости изображения.

Использование свойства 'image-rendering' в CSS3

CSS3 предлагает контролировать способ масштабирования изображений, включая <canvas>, с помощью свойства image-rendering. Вариант pixelated обеспечивает использование интерполяции ближайшего соседа.

canvas {
  image-rendering: pixelated;
}
// Изображения на холсте сохранят пиксельный стиль.

Обратите внимание, что поддержка этой функции варьируется в разных браузерах, поэтому необходимость тестирования не исключается.

Совместимость с браузерами

Mozilla и Webkit

Поддержка данного свойства в браузерах весьма непостоянна. В Firefox следует использовать mozImageSmoothingEnabled, а для браузеров на основе Webkit — webkitImageSmoothingEnabled.

ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
// Начиная с этого момента, все браузеры будут сохранять четкость холста.

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

Can I Use?

Советуем проверить поддержку image-rendering: pixelated на сайте Caniuse.com. Начиная с Chrome версии 38, эта функция доступна.

Помощь от JavaScript

Ручное масштабирование

JavaScript пригодится, если требуется полный контроль над процессом. Вы можете использовать большой холст и масштабировать каждый пиксель в отдельности.

ImageData для работы с пикселями

Свойство ImageData можно использовать для тонких настроек, применяя свои алгоритмы обработки пикселей.

Лучшие практики для высокопроизводительных приложений

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

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

Для наглядности, вот как выглядит сохранение качества пикселей при отключении интерполяции:

Силу узоров нельзя недооценивать

Используйте ctx.createPattern для создания масштабируемого шаблона изображения:

// Предположим, 'image' – это ваше изображение или другой холст
var pattern = ctx.createPattern(image, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Ваш холст превратится в совокупность четких изображений.

Практические примеры

Воспользуйтесь интерактивными примерами, такими как JsFiddle или CodePen, чтобы увидеть результаты прямой работы с кодом.

Метод scale()

Метод scale() позволяет сохранить чёткость рисунков после масштабирования, если imageSmoothingEnabled установлен в false.

ctx.scale(2, 2);  
// Все последующие рисунки останутся такими же чёткими.

Полезные материалы

1. HTML Standard — официальное описание работы с изображениями на холсте.
2. CanvasRenderingContext2D: imageSmoothingEnabled property – Web APIs | MDN — подробное описание свойства imageSmoothingEnabled.
3. WebGL Resizing the Canvas — подробная информация о работе WebGL и масштабировании холста.
4. Exploring canvas drawing techniques — Perfection Kills — полное руководство по техникам рисования на холсте, включая устранение размытости при масштабировании.
5. HTML Canvas Reference — справочник по тегу HTML <canvas>.
6. CodePen Example: Disabling Canvas Image Smoothing — примеры, демонстрирующие возможности манипуляций с визуализацией.