Пример для понимания:
https://www.reed.be/
Хочется повторить примерно такое же.
Есть канвас, на нем 3 блока с изображениями + 1 блок с кругом, который двигается по алгоритму за указателем мыши. С этим проблем нет. Это реализовано и отлично работает.
Проблема заключается в том, что хочется задать для круга стиль - умножение(multiply), как это сделано на сайте примере, но чтобы круг
оставался только внутри блоков с изображениями, то есть в моем случае, мне нужно также использовать (source-atop).
И вот незадача в том, что невозможно прописать сразу 2 свойства для globalCompositeOperation. Как быть? На сайте примере код минифицирован, как не пытался разобраться, что же они придумали - не получилось.
Если прописать только
context.globalCompositeOperation = 'source-atop';
то круг будет кататься внутри блоков и спасает только прозрачность, но это всё равно хуже, чем умножение цвета.
Если прописать только
context.globalCompositeOperation = 'multiply';
то цвета умножаются, но круг теперь катается по всей области канваса, что выглядит уже не так классно