How to make a texture overlay on a transparent image (png) or on a dom element?

Question

css

Hello, dear programmers....and designers...and typesetters :D
I came across a non-trivial task. There is a door frame (the structure and design of the door may vary). There is a texture for such a door. How to apply texture?!?
The screenshot shows approximately how it should look before and after applying the texture.

Work with DOM tree? Or Canvas? If possible, answer not just yes or no, but more detailed.

Answer 1

My version. Should be done in SVG. Prepare 4 files:
1-2. Two textures the size of the entire image field: with the horizontal direction of the wood and with the vertical.
3-4. From the drawing of the door, make two masks: one for areas with a horizontal texture direction, the other for vertical ones.
Well, put it all together. Just keep in mind that you showed a rendered image on the right, there are shadows there. Those. It's not just about texture mapping, it's also about lighting and rendering. Therefore, do not expect that due to the textures you will get such a picture as shown.
To improve, I can advise you to overlay the drawing itself on top of all this so that the edges are additionally drawn, because otherwise they will not be visible (it will just be the border of the two textures, not selected in any way).

Answer 2

don't you think that in the example there is just a separate transparent picture with a drawing and a separate picture with a textured door? more like a render, to be honest, than a regular texture