Brush effect on page through canvas

I am working on a functionality where I have to create a brush like effect on the web-page.

The requirement is that there will be multiple patterns/textures available in the background. And the user will drag the mouse to create the effect of that pattern on the page.

Below is the JSFiddle link where I have created the structure, I am able to create the pattern, but the functionality where I am confused, is that how to create the pattern with the brush effect.

I have added the brush image as a data source in my JSFiddle Link

I am a beginner in canvas, I don't have any idea on where to move forward, also please let me know if I am going in the right direction.

Check the Reference Website where this functionality is running and working.

from Brush effect on page through canvas