Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

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:
© 2015 Microsoft