The beginPath function

• An example

The beginPath function can be used to begin a new path, with nothing in it, to draw on your canvas. It's a good idea to use because if you start using animation you may get trailing, connecting lines, which only become apparent in animations. These lines can be due to paths at the end of the drawing being left open and then connecting to the start of the drawing on the next frame.

The beginPath function in effect "resets" the path - emptying it of all sub-paths. It's a good idea to use this function whenever you start a new "section" of drawing. There is an associated closePath function but this has the (sometimes undesired) side effect of drawing a line from the last point in your path back to the starting point.

An example

<script>
    window.onload = function ()
    {
        var canvas  = document.getElementById("cvs");
        var context = canvas.getContext('2d');

        // Start a new path
        context.beginPath();
        context.rect(50,50,100,100);
        context.stroke();
    }
</script>