closePath (a path command)

suggest change

Draws a line from the current pen location back to the beginning path coordinate.

For example, if you draw 2 lines forming 2 legs of a triangle, closePath will “close” the triangle by drawing the third leg of the triangle from the 2nd leg’s endpoint back to the first leg’s starting point.

A Misconception explained!

This command’s name often causes it to be misunderstood.

context.closePath is NOT an ending delimiter to context.beginPath.

Again, the closePath command draws a line – it does not “close” a beginPath.

This example draws 2 legs of a triangle and uses closePath to complete (close?!) the triangle by drawing the third leg. What closePath is actually doing is drawing a line from the second leg’s endpoint back to the first leg’s starting point.

<!doctype html>
    body{ background-color:white; }
    #canvas{border:1px solid red; }

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var topVertexX=50;
    var topVertexY=50;
    var rightVertexX=75;
    var rightVertexY=75;
    var leftVertexX=25;
    var leftVertexY=75;

    // A set of line segments drawn to form a triangle using
    //     "moveTo" and multiple "lineTo" commands

    // closePath draws the 3rd leg of the triangle


}); // end window.onload
    <canvas id="canvas" width=200 height=150></canvas>

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents