Baseline Widely available
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()
.
None.
Return valueNone (undefined
).
This example creates two paths, each of which contains a single line.
HTML<canvas id="canvas"></canvas>
JavaScript
The beginPath()
method is called before beginning each line, so that they may be drawn with different colors.
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 Browser compatibility See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3