When are beginpath and closepath used in canvas?


learncanvasAt the same time, it’s not how to draw all kinds of graphics, but how to draw thembeginPath()andclosePath()When do these two functions work? What do they do.

First of all, this is the case of 2d rendering, that isCanvasRenderingContext2DObject (2d rendering context, this translation feels awkward).

One thing to be clear is the idea of drawing with canvasDrawing a graph by drawing a path, which is a collection of a series of points. There is a pen tool in PS, which is very similar to this. We will first draw the path with the pen tool, and then we can choose to fill or stroke.

When you don’t know the concept, look at it carefully


Canvasrenderingcontext2d. Beginpath() is a method of canvas2d API to start a new path by clearing the list of sub paths. Call this method when you want to create a new path.

When we draw a path, there will actually be a path list to help us record the sub paths currently drawn, and the whole list is the path we are currently drawing. So what’s the ghost of subpath? For example, you draw a line in the East, a line in the west, and a line in the middle. These three lines are sub paths. They don’t have to be connected end to end. They can intersect or not. When you callbeginPath()Method, the entire list will be cleared, whether you have it or notfill()perhapsstroke()It’s all dead.


Canvasrenderingcontext2d. Closepath() is the method used by the canvas2d API to return the pen point to the starting point of the current subpath. It attempts to draw a line from the current point to the starting point. If the graph is already closed or has only one point, this method does nothing.

Attention, yesSubpath. The definition here is quite clear, so there is no need to repeat it.

Draw path

After understanding their definitions, I should have a general idea of how to use them. It’s also necessary to say thatmoveTo()The definition of

Canvasrenderingcontext2d. Moveto() is a method of canvas2d API to move the starting point of a new subpath to (x, y) coordinates.

Attention, yesSubpath. Therefore, the rules for drawing a path (including multiple sub paths) are as follows:

  1. beginPath()once

  2. Draw a subpath first. be necessarymoveTo()MoveTo, and then call the corresponding drawing function, finally, it is necessary.closePath()Close path. Drawing multiple lines is just like this.

  3. fillfill()Or strokestroke()Or both.

  • Explanation of rule 2: why is it necessary to move to and close path? Close path is easy to understand. I just want to draw a path, so there is no need to close it. As for moveto, it depends on the effect you want to draw, literally. Where do you want to start? For examplearc()To draw a fan, you have to move the starting point to the origin first, or you will draw an arch like an arch bridge,Click to view relevant examples

  • Explanation of rule 3: because the previously drawn path only records the positions of a series of points, it is not really drawn, so the function is called to render

Finally, notice that some methods automatically close the path, such asfill()andclip(). This is also very easy to understand, because these two methods are applied to a region. If they are not closed, how can the computer know which region you want to operate on? In this case, you don’t need to callclosePath()It’s too late.stroke()The path is not automatically closed.Click to view relevant examples

Note: the above API definitions are fromMDN