The beginPath function
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>