The HTML5 Paths are designed to represent any shape that you may want to render. You would use beginPath call to start it. These paths can take any form and can be complex if needed. For example, you can create multiple lines and curves or sub-paths with HTML5 paths. In other word, if you need to create any kind of path on your canvas you need to use HTML5 Path API.

In order to start your drawing, you need to call beginPath as we have mentioned earlier. This function does not take arguments and used to let canvas know that you are starting you’re your shape drawing.

We can make calls right after we make call to beginPath to other functions required to complete our drawing. In other word, we are working within beginPath context and any call to other HTML5 functions will be within this context.

For example, there are two often used calls to functions moveTo(x coordinate, y coordinate) and lineTo(x coordinate, y coordinate). You can probably guess what they do. The first, moveTo, moves current location to a new destination. There is no drawing at this point and the second lineTo moves and performs drawing at the same time.

The closePath is the next pathing function. It is somewhat similar to lineTo but destination is always your origination of the path. We make a call to closePath if we want to complete drawing and return to the starting point.

Example of how to use HTML5 paths will be useful for your review:

<script>

function pathExample ( context )

{

    context.beginPath();

    context.moveTo(10, 10);

    context.lineTo(2, 20);

    context.ClosePath();

}

</script>

As you can see form the example above, it is practical and straight forward code that can be understood without too much effort.