Clipping paths in canvas using Expression Blend

Sometimes you need to cut a shape out from your canvas to produce a special effect by showing another object from behind the canvas appearing in the clipped area. This mainly is used in making animations to for instance display a text appearing in the clipped area.

In order to achieve this all you need is a canvas, another object inside the canvas, i.e. text or a rectangular to work as a color panel, and a path in your desired shape:

1. Add a canvas to your page

2. Add a rectangular inside the Canvas and fill it with a color

3. Draw a path

make sure you clicked on the LayoutRoot level before drawing the path, so your path doesn’t appear inside the canvas. You can draw a path using Pen tool. Select the Pen tool from tools panel and click on different places on the page to see the shape been drawn, to end the path click on the start point.

4. Clipping the path out from the canvas
you can choose which object to be clipped from the other by the order of selecting them. In this case we want our shape which we created using path method to be clipped from the canvas. Therefore, we need to click and select our path first, and then holding the Ctrl button on the keyboard click on the canvas.

We should now have both our path and canvas selected. Go to ‘Object’ menu in Blend and from ‘Path’ click on ‘Make Clipping Path’ (shortcut key is Ctrl + 7).

Now your canvas should have a hole in the shape you draw earlier using the Pen. So by moving the rectangular inside the canvas you will be able to notice the clipped area appearing when the rectangular or text is on the same position and disappearing when we move the rectangular or text to outside the clipped area.