How to fill free space with quadrilaterals?

Question

JavaScript

Hello!
There is a task in which the user can select areas of the page. The page will have a translucent overlay, and the selected area will be through.
This is how the "Send feedback" functionality is implemented in gmail.

By assumption, blocks (div, canvas, svg) with a translucent background are "drawn" around the selected areas.
Tell me how to calculate the positioning of areas with a dark background. In which direction to dig?

Answer 1

For the black area, use one overlay that has a z-index less than the selected areas. At the same time, overlay and areas must be in the same block so that there is access inside the selected blocks

Answer 2

Look better towards SVG path, and masks.