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.
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");
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();
Result