Html5 Canvas Shapes Fill

I have a basic paint application on a canvas, and I want to make a drawing-border and by that create a stencil. In other words, I want to make a shape, and then I want the user to

Solution 1:

This can be achieved by making a clipping region. The basic idea is that there is a path on the canvas that all drawing is constrained to.

Make the shape, and instead of calling stroke() or fill(), call clip()

If you don't quite get how clipping regions work, there are a few examples around.