HTML canvas beginPath() methode

Definitie en gebruik

beginPath() Methoden beginnen een pad, of resetten het huidige pad.

Tip:Gebruik deze methoden om paden te maken: moveTo(), lineTo(), quadricCurveTo(), bezierCurveTo(), arcTo() en arc().

Tip:Gebruik stroke() Methoden om een exact pad te tekenen op het canvas.

Voorbeeld

Teken twee paden op het canvas; rood en blauw:

Uw browser ondersteunt de HTML5 canvas tag niet.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth="5";
ctx.strokeStyle="red"; // Red path
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // Draw
ctx.beginPath();
ctx.strokeStyle="blue"; // Blue path
ctx.moveTo(50,0);
ctx.lineTo(150,130);
ctx.stroke(); // Draw

Try it yourself

Syntax

context.beginPath();

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.