Как заполнить свободное пространство четырёхугольниками?

Question

[bio]

Всем привет!
Есть задача, в которой пользователь может выделать области страницы. На странице будет полупрозрачный оверлей, а выделенная область будет сквозная.

Примерно так реализован функционал "Отправить отзыв" в gmail


По предположению, во круг выделенных областей "рисуются" блоки(div, canvas, svg) с полупрозрачным фоном.

Подскажите, как рассчитать позиционирование областей с тёмным фоном. В какую сторону копать ?

Comments

[nirvimel]

По предположению, во круг выделенных областей "рисуются" блоки(div, canvas, svg) с полупрозрачным фоном.

Неверное предположение.

[bio]

nirvimel: а как ? кроме как позиционировать div или рисовать "дырки" в canvas и svg, в голову ничего не приходит

[nirvimel]

bio:

рисовать "дырки" в canvas и svg

Только так.

[bio]

nirvimel: Спасибо, реализовал на canvas

Answer 1

[WQP]

Для чёрной области используйте один overlay, у которого z-index будет меньше чем у выделенных областей. При этом overlay и области должны находиться в одном блоке, чтобы был доступ внутри выделенных блоков

Comments

[bio]

WQP Сделал как Вы описали, но ее совсем понял, а как это поможет сделать "сквозные" выделенные области ? https://jsfiddle.net/4ost0ebz/

Answer 2

[Karponter]

Смотрите лучше в сторону SVG path, и масок.