beginPath

beginPath is a method of the CanvasRenderingContext2D interface used in HTML5 canvas drawing. It starts a new path by emptying the current list of subpaths, effectively resetting the existing path without affecting the canvas content. After calling beginPath, subsequent drawing commands build a new path from scratch.

The method takes no arguments and does not itself render anything. To produce visible output, you must follow beginPath with drawing commands such as moveTo, lineTo, arc, quadraticCurveTo, or bezierCurveTo, and then apply a rendering operation like stroke or fill. This separation allows developers to create multiple distinct shapes or components on a single canvas without unintentionally connecting them.

beginPath is commonly used when drawing several shapes in sequence. By starting a new path before each shape, you avoid linking the shapes into a single subpath, which would affect how they can be stroked or filled. It is often paired with closePath to explicitly close a subpath, though closePath is optional for filled or stroked shapes.

In practice, typical usage follows a pattern such as: beginPath, define the path with moveTo and line or curve commands, then call stroke or fill. The command affects only the current path state; it does not alter styles or transformations, which are controlled separately through properties like strokeStyle, fillStyle, and current transformation matrices. beginPath is supported by all major browsers as part of the standard Canvas API.