How to implement a similar constructor using canvas?

Question

JavaScript

Good afternoon!
Please help me to understand how such functionality and/or similar (only canvas constructor) is implemented?
On the one hand, you can simply replace pre-prepared pictures, on the other hand, you can try to repaint the background like here .
I would be glad for any help and / or advice on how to implement such effects. If there is some kind of ready-made series of lessons on Youtube or Udemy that contains basic material for understanding the principles, I will be glad for any links.

Answer 1

Well, here you can see that the images are being replaced, and it will be quite expensive to calculate the overlay pixel by pixel in terms of performance)