canvas и globalCompositeOperation

[Nupster]

Пример для понимания: https://www.reed.be/

Хочется повторить примерно такое же.

Есть канвас, на нем 3 блока с изображениями + 1 блок с кругом, который двигается по алгоритму за указателем мыши. С этим проблем нет. Это реализовано и отлично работает.

Проблема заключается в том, что хочется задать для круга стиль - умножение(multiply), как это сделано на сайте примере, но чтобы круг оставался только внутри блоков с изображениями, то есть в моем случае, мне нужно также использовать (source-atop).

И вот незадача в том, что невозможно прописать сразу 2 свойства для globalCompositeOperation. Как быть? На сайте примере код минифицирован, как не пытался разобраться, что же они придумали - не получилось.

Если прописать только

context.globalCompositeOperation = 'source-atop';

то круг будет кататься внутри блоков и спасает только прозрачность, но это всё равно хуже, чем умножение цвета.

Если прописать только

context.globalCompositeOperation = 'multiply';

то цвета умножаются, но круг теперь катается по всей области канваса, что выглядит уже не так классно

[Alexandroppolus]

чтобы круг оставался только внутри блоков с изображениями

https://developer.mozilla.org/en-US/...Context2D/clip

[Nupster]

https://developer.mozilla.org/en-US/...Context2D/clip

Я попробовал. Такое не прокатывает. Вот порядок действий, как я отрисовываю всё на канвасе, на mouseover всё просто повторяется.

//отрисовываю изображения
context.drawImage(...);
context.drawImage(...);
context.drawImage(...);

//тут вставить клип?
context.clip();

//вывод круга
context.globalCompositeOperation = 'multiply';
context.beginPath();
context.arc(pos.x, pos.y, r, 0, 2 * Math.PI);
context.fillStyle = slide.backgroundCircle;
context.fill();

В итоге круг не выводится совсем.

[Alexandroppolus]

https://jsfiddle.net/alexandroppolus/tmupx5f8/

clip использует тот путь, который ты наколбасил перед этим. В примере путь состоит из прямоугольников с картинками, условно обозначенных как red и blue

заодно глянь про save/restore, если надо будет убрать область clip

[Nupster]

Великолепно! Спасибо за помощь, всё заработало.

[Nupster]

Заметил такую проблему. В firefox данная фишка не работает. А в хроме всё ок. Как быть?

[Dilettante_Pro]

В firefox данная фишка не работает.

Пример Alexandroppolus в Firefox Quantum 61.0.31 работает

[Nupster]

Пример Alexandroppolus в Firefox Quantum 61.0.31 работает

Firefox(61, 62 тоже проверил, аналогично)


А вот, что в Chrome - верно:

[Dilettante_Pro]

У меня пример Alexandroppolus, (именно он - по ссылке в пост #4)
в Firefox Quantum 61.0.31 (обновился до 62.0 - то же самое), выглядит точно так же, как в Хроме

[рони]

Dilettante_Pro,
у меня тоже что уNupster,
результат разный