An example of the HTML5 canvas path functions: closePath() example

This demonstrates the closePath() function. Three sides of the rectangle are drawn (top, right and bottom) and the closePath() call draws the final left line.

[No canvas support]
<script>
    context = document.getElementById('cvs').getContext('2d');
    
    context.beginPath();
        context.moveTo(50,50);
        context.lineTo(550,50);
        context.lineTo(550,200);
        context.lineTo(50,200);
    context.closePath();
    context.stroke();
</script>

« Back to article