CanvasRenderingContext2D.beginPath()

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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

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

JavaScript

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:

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:200px">
// 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();</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

Especificaciones

Especificación Estatus Comentario
WHATWG HTML Living Standard
The definition of 'CanvasRenderingContext2D.beginPath' in that specification.
Living Standard  

Compatibilidad de los navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico (Yes) (Yes) (Yes) (Yes) (Yes)
Característica Android Chrome para Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

Ver también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: PepeBeat
 Última actualización por: PepeBeat,