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 be able to draw only inside it, even when he tries to draw outside开发者_StackOverflow社区.

Do you have any idea how can i do it? thanks

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.