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

This draws a rectangle which is positioned at [100,100] and is 50x50 in size. It uses the stroke() function so that you see the outline of the rectangle but not the fill() function so there's no fill color inside the outline.

[No canvas support]
<script>
    context = document.getElementById('cvs').getContext('2d');
    
    context.beginPath();
    context.rect(100,100,50,50)
    context.stroke();
</script>

« Back to article