Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

closePath method

Closes the current subpath and starts a new subpath that has a start point that is equal to the end of the closed subpath.

HTML Canvas 2D Context, Section 9Internet Explorer 9

Syntax

CanvasRenderingContext2D.closePath();

Parameters

This method has no parameters.

Return value

This method does not return a value.

Standards information

Remarks

Be aware that CanvasRenderingContext2D represents a canvas rendering 2D context object, as shown in the following example.

Examples

The following code example shows how the closePath method closes a path. The image shows the output where two lines have the path closed.

Result output of example showing three lines with path closed on two.


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


See also

CanvasRenderingContext2D
beginPath

 

 

Show:
© 2014 Microsoft