CanvasRenderingContext2D.beginPath()

El método CanvasRenderingContext2D.beginPath() del API Canvas 2D comienza una nueva ruta vaciando la lista de sub-rutas. Invoca este método cuando quieras crear una nueva ruta.

Sintaxis

void ctx.beginPath();

Ejemplos

Usando el método beginPath

Este es solo un trozo de código el cual usa el método beginPath.

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
var canvas = document.getElementById("canvas");
var 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();

Edita el código aquí debajo y mira tus cambios actualizarse en vivo en el canvas:

Especificaciones

Specification
HTML Standard
# dom-context-2d-beginpath-dev

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también