HTML5 Canvas Beginpath () method

The Beginpath () method starts a path or resets the current path. W3school on the explanation!

Path is a very important concept in canvas, people who have just started to learn the canvas are not very deep understanding of the path, they will use the canvas when the Beginpath (), a small demo today to illustrate the path

If you do not change this code, the display of a red line and blue lines, we will think, what is there to say, it must be so ah.
Next we annotate the second context.stroke (), and you'll see that the final result is just a blue line, because the first path has no stroke (), followed by a
On the re-opening of a path, so that only the second path to draw a straight line, we are not found more and more magical?
And then I put the Context.beginpath () out of the comment context.stroke (), what did you find? It's amazing that you found a Purple Line and a blue line, why? It turned out that there was no new path, so the second stroke () re-drew the first line and used blue, while the first stroke () had already drawn the first line in red, and the combination of blue and red became purple, and the second
Context.stroke (); painted blue.
What do you think about the Beginpath () and the stroke ()? Two blue lines, you were good
HTML5 Canvas Beginpath () method