Можно ли использовать режим наложения холста поверх родительского элемента dom?

Я хотел бы смешать небольшой элемент холста с большим родительским элементом фона. Я безуспешно пробовал следующее:

JS:ctx.globalCompositeOperation = "overlay";

Я считаю, что globalCompositeOperation работает только с элементами, нарисованными друг на друге на холсте.

CSS:background-blend-mode: overlay;

Я думал, что css background-blend-mode может работать, но, увы, нет.

Я понимаю, что элемент холста находится в своем собственном маленьком мире, и что смешивание его с другими элементами html - это выстрел в темноту - просто хотел подтвердить, что я ничего не упустил.


canvas css blending
person calipoop    schedule 01.10.2015    source источник
comment
Вы пробовали смешанный режим CSS?   -  person vals    schedule 01.10.2015
comment
@vals вау! Поэтому пишу здесь на всякий случай - чтобы мозг не взорвался. ДА, смешанный режим отвечает на вопрос. Если вы хотите сделать это официально, я соглашусь ;)   -  person calipoop    schedule 01.10.2015

Ответы (2)


arrow_upward
1
arrow_downward

Может быть, вы можете нарисовать «Родительский фоновый элемент» на холсте, а затем смешать? Это может быть немного дорого, но я думаю, это один из немногих вариантов, которые у вас есть.

person Tempestas Ludi    schedule 01.10.2015
comment
Да, это единственный вариант, который я тоже мог придумать. Мой холст очищается / анимируется, поэтому мне придется снова и снова рисовать весь фон в дополнение к оригиналу - я бы не хотел: P - person calipoop; 01.10.2015

arrow_upward
1
arrow_downward

Как указал Вальс в комментариях, ответ на мой вопрос: да, с использованием режима смешивания: css mix-blend-mode

person calipoop    schedule 06.10.2015