Html5 canvas forms fill

Question

I have a main application for drawing on canvas, and I want to create a border for the drawing and thereby create a stencil. In other words, I want to create a shape, and then I want the user to be able to draw only inside it, even when he is trying to draw outside.

Do you have an idea how I can do this? thanks

Answer 1

This can be achieved by creating a clipping area. The basic idea is that there is a path on the canvas to which the entire drawing is attached.

Make a form and instead of calling stroke() or fill() call clip()

If you do not quite understand how clipping regions work, there are a few.