This topic has not yet been rated - Rate this topic

beginPath method

Resets the current path.

Syntax

var retval = CanvasRenderingContext2D.beginPath();

Parameters

This method has no parameters.

Return value

Type: HRESULT

If this method succeeds, it returns S_OK. Otherwise, it returns an HRESULT error code.

Standards information

HTML Canvas 2D Context, Section 9

Remarks

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.

Examples

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

HTML


<html>
<head>
    <title>Canvas beginPath example</title>
    <script>
        function beginDemo() {
            var canvas = document.getElementById("demo")
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');
                ctx.beginPath();
                ctx.lineWidth = "3";
                ctx.strokeStyle = "blue";  // This path is blue.
                ctx.moveTo(0, 0);
                ctx.lineTo(150, 150);
                ctx.lineTo(200, 150);
                ctx.stroke();
                ctx.beginPath();
                ctx.strokeStyle = "red";   // This path is red.
                ctx.moveTo(0, 0);
                ctx.lineTo(50, 150);
                ctx.stroke();           // Draw it.                      
            }
        }
          </script>
</head>
    <body onload="beginDemo();">
        <canvas id="demo" width="300" height="300">This browser or document mode doesn't support canvas</canvas>
  </body>
</html>

Community Additions

ADD