Multiple identical canvas animations on one page?

Question

JavaScript

Please help, I'm new to layout, I don't know how to work with canvas yet. There's a background that shows a window half open in the middle... And there's a canvas animation that simulates raindrops. My task is to apply this rain effect only to those parts of the image where there is glass (it turns out about 45 percent on the left, and 45 percent on the right, the middle with the "open window" should be respectively without rain).

Here is the code:
https://codepen.io/IgorMilton/pen/YzZjbRr

At first I tried to overlay the whole image on the image - I can't leave the "empty" middle, it's raining all over the image ... Now I've done a wild rake - I made three images on the background through flex, and overlaid canvas on the first image with a width of 45%. Accordingly, now there is rain on the left side of the window, it remains to add it to the right side, leaving the middle without animation, although this is of course a wild rake, and I think that you can simply apply the rain effect to the entire image fragments (without the middle of the background).
Help me please.

Answer 1

The RainyDay.js library is quite old, so you have to do it in such a crutch way.