Как инвертировать фото с помощью HTML5 canvas

Сегодня работа как-то не клеилась, поэтому я решила поучаствовать в еженедельном Codepen Challenge. В этот раз тема — эффекты наведения на изображениях.

https://codepen.io/gnykka/pen/LYpxJEe

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

Похожий подход я использовала, когда делала один из проектов в прошлогоднем Парке Интуиции, MDWRLD. Там все фото и картинки рисуются на наскольких canvas. Они смещаются с разной скоростью и этим создают эффект параллакса. Быстрой перерисовки и плавности скролла удалось добиться благодаря предобработке фото при загрузке. Каждое фото загружается, запоминается в виде последовательности своих пикселей и на всякий случай сразу же инвертируется. А потом уже очень просто при любом сдвиге поместить эту последовательность в новое место.

Главная проблема canvas в том, что обычно при любых изменениях перерисовывать приходится сразу всё. В svg проще — изменил один элемент и всё готово. Ну и векторная графика прекрасно масштабируется, а на canvas вечно надо ухищряться, чтобы избежать размытости.

#практика #canvas