Drawing a Rectangle

If you're looking to draw a rectangle on a canvas, you can use techniques we've looked at before to simply draw four lines at right angles. But you don't need to; there are build in methods to do this for you.

You could easily draw a simple rectangle by using the lineTo() method:

context = canvasTag.getContext('2d');
context.beginPath();
context.lineTo(200, 0); context.lineTo(200, 100); context.lineTo(0, 100); context.lineTo(0, 0); context.stroke();
context.closePath();


While this isn't difficult, it takes four lines of code to draw. There is an easier way: you can use the Context.rect() method to simplify drawing a rectangle. See below.

context = canvasTag.getContext('2d');
context.beginPath();
context.rect(0, 0, 200, 100); context.stroke();
context.closePath();