Skip to main content
beginPath method

Resets the current path.

HTML Canvas 2D Context, Section 9 Internet Explorer 9





This method has no parameters.

Return value

This method does not return a value.

Standards information


A path consists of a list of zero or more subpaths. Each subpath is a list of one or more points that are connected by straight or curved lines. Each subpath also contains a flag that indicates whether the subpath is closed. If a subpath is closed, the last point of the subpath is connected to the first point by a straight line. Subpaths that have fewer than two points are ignored when the path is painted.


The following code example uses the beginPath method to paint two paths by using different colors.

    <title>Canvas beginPath example</title>
        <canvas id="demo" width="300" height="300">
        This browser or document mode doesn't support canvas

            var canvas = document.getElementById("demo")
            if (canvas.getContext) {
              var ctx = canvas.getContext('2d');
              ctx.lineWidth = "3";
              ctx.strokeStyle = "blue";  // This path is blue.
              ctx.moveTo(0, 0);
              ctx.lineTo(150, 150);
              ctx.lineTo(200, 150);
              ctx.strokeStyle = "red";   // This path is red.
              ctx.moveTo(0, 0);
              ctx.lineTo(50, 150);
              ctx.stroke();           // Draw it.                      

See also