Rectangles

Contact Us or call 1-877-932-8228
Rectangles

Rectangles

To create a rectangle, you specify the top-left starting position (x,y) and the width and height of the rectangle. There are three methods for creating rectangular shapes:

  1. fillRect(x,y,width,height) - draws a filled rectangle.
  2. strokeRect(x,y,width,height) - outlines a rectangle.
  3. clearRect(x,y,width,height) - clears a rectangular area.

Code Sample:

html5-canvas/Demos/rect.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----

	if (canvas.getContext) {
		context = canvas.getContext("2d");
		context.strokeStyle="red";
		context.fillStyle="blue";
		context.fillRect(80,80,40,40);
		context.strokeRect(60,60,80,80);
		context.clearRect(90,90,20,20);
	}
---- C O D E   O M I T T E D ----

The above code will render the following:

Next