How to paint the entire canvas, except for known coordinates?

Question

Canvas

Hey guys. First of all, Happy New Year!
And now the question)
There is an image. Let's say 1000 by 1000 pixels. It is broken into map and area with coordinates.
There is a canvas that draws the AREA element when hovering over it (draws according to the coordinates of the area tag). It's not hard, it works.
It is necessary to implement a seemingly simple function, when you click on AREA, the rest of the area, except for AREA, should be painted over. We have the dimensions of the image and the coordinates of the area. There can be a lot of coordinates. As well as such images and canvases themselves. All this should also be adaptive (I haven’t tried it here yet, but I’ll have to make some kind of scale parameter and multiply all the coordinates and image size by it. As I understand it, I’ll have to multiply each element of the coordinate array in a cycle ...).
I'm still learning, I don't know how to think like a real Jedi. Therefore, I need the help of Master Yoda, who will tell me how to automate the process. At least with the question of drawing on the canvas around known coordinates.
Thanks in advance for your answers.

Answer 1

It seems to me that with all the clutter of Area and others, you forgot about the Image constructor and drawImage .
PS Here is a good description of all Canvas functions with examples. Unfortunately, in English

Answer 2

Pictures in it are positioned through css.
When moving the mouse movement, then this is one of the parallax effects. Implementation example www.jqueryscript.net/animation/jQuery-Plugin-For-3...
Or more precisely https://github.com/ariona/hover3d or https://codepen.io/ariona/pen/JopOOr well or https://gijsroge.github.io/tilt.js/
Specifically, such an effect as on this site is easier to do by example and likeness.