Export (0) Print
Expand All

beginPath method

Resets the current path.

HTML Canvas 2D Context, Section 9Internet Explorer 9

Syntax

CanvasRenderingContext2D.beginPath();

Parameters

This method has no parameters.

Return value

This method does not return a value.

Standards information

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>
<head>
    <title>Canvas beginPath example</title>
</head>
    <body>
        <canvas id="demo" width="300" height="300">
        This browser or document mode doesn't support canvas
        </canvas>

          <script>
            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>
  </body>
</html>


See also

CanvasRenderingContext2D

 

 

Show:
© 2014 Microsoft