Can someone explain to me what path means when using .beginPath() in html canvas

beginPath starts the definition of a path. A path is a sort of grouping, it's a number of drawing commands that will be treated together when actually stroking them.

closePath is, first of all, not the symmetric to beginPath. Because it does not end a path. It's merely another drawing command that draws a line from wherever you are to the beginning of the path. It's use is mostly optional (read at the end to see it's usefulness)

Now, to understand why you'd want to define various paths, you have to think about the actual visual properties of the path. You see, there are drawing commands like lineTo and then there are properties that set how that line will actually be drawn. (In the examples below I'll only be playing with lineWidth and strokeStyle)

So, you ctx.lineTo(100,100) and then to actually see the line you ctx.stroke() and the line will be drawn with the properties you've set.

Now, we will be aiming to draw a diamond shape with four lines. The two lines on top will be red and thin, and the bottom two blue and fat.

Our first try has two blocks, drawing each part. But the second beginPath is commented out. So what happens is that both parts get drawn in fat blue lines.

Let's uncomment that line. Now, the second part defines a new path and so, when we set the colour and width it does not affect the previous part. As /u/ceagrass points out, when we call beginPath for the second time, the first path is ended (we're done drawing that path and will be drawing a new one from that point on). I wouldn't say closed, because a path does not need to be closed.

In the example you've linked in MDN they are not using beginPath because it is not always needed. There are other things you can draw (e.g. fillRect).

Finally, in the JSFiddles I've set up for you to play, try uncommenting the ctx.closePath(); calls if you want to see their effect. It looks, mostly like a simple drawing command and that we could just do ctx.lineTo(500,100); and it would achieve the same. But if you look closely it's not really the same. Using closePath Actually closes the path. It joins together the line.

/r/javascript Thread