CanvasRenderingContext2D: beginPath() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The
CanvasRenderingContext2D.beginPath()
method of the Canvas 2D API starts a new path by emptying the list of sub-paths. Call
this method when you want to create a new path.
Note:
To create a new sub-path, i.e., one matching the current
canvas state, you can use CanvasRenderingContext2D.moveTo().
Syntax
js
beginPath()
Parameters
None.
Return value
None (undefined).
Examples
Creating distinct paths
This example creates two paths, each of which contains a single line.
HTML
html
<canvas id="canvas"></canvas>
JavaScript
The beginPath() method is called before beginning each line, so that they
may be drawn with different colors.
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// First path
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();
// Second path
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();
Result
Specifications
| Specification |
|---|
| HTML # dom-context-2d-beginpath-dev |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
beginPath
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
- The interface defining this method:
CanvasRenderingContext2D CanvasRenderingContext2D.closePath()