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