Use an image as polyline stroke outline

I have a paint-like application, when I move the mouse it will draw a line by polyline. Now I want to replace the polyline outline with a pattern image, so when I move the mouse in the canvas it repeats that image as polyline's outline. I've already written this code:

<Canvas x:Name="canvas" Background="#00FFFFFF" MouseMove="Canvas_MouseMove">
    <Polyline x:Name="polyline" StrokeThickness="20">
        <Polyline.Stroke>
            <VisualBrush >
                <VisualBrush.Visual>
                    <Image Source="1.png"></Image>
                </VisualBrush.Visual>
            </VisualBrush>
        </Polyline.Stroke>
    </Polyline>
</Canvas> 

The only problem is that it uses the image as an invisible background for the whole canvas and when I move the mouse that part of the background became visible! Look at this picture to get what I mean:

http://goo.gl/2wPKN

here is also my image pattern if you want to have a look:

http://goo.gl/staHt

So do you have any idea how should I use this image as my polyline outline?

You may use an ImageBrush with a TileMode set to Tile and a Viewport that specifies the desired image tile size.

<Polyline x:Name="polyline" StrokeThickness="20">
    <Polyline.Stroke>
        <ImageBrush ImageSource="1.png" TileMode="Tile"
                    ViewportUnits="Absolute" Viewport="0,0,20,20"/>
    </Polyline.Stroke>
</Polyline>