1. Technology

Drawing Rectangles on HTML 5 Canvas

Learn How to Draw Rectangles on an HTML 5 Canvas Element

By

You may be thinking that drawing rectangles is not very useful. But it is a great way to start learning how to draw on the HTML 5 <canvas> tag. I’ll show you three ways you can draw rectangles on your HTML 5 canvas, create a very simple abstract drawing with rectangles, and finally show you how to create a basic bar graph using a canvas tag.

Filled, Outline, and Blank Rectangles

There are three types of rectangles that you can draw on your canvas: filled, outline, and blank. A filled rectangle will be solid black (or whatever color your fill style is set to), an outline will be just the border of a rectangle, and a blank rectangle clears the space to the background color (usually white) of your canvas.

Just like in the basic canvas tutorial, you need to add a canvas tag to your HTML 5 document:

<canvas id="rectangle" width="300" height="300"></canvas>

Then you use JavaScript to draw your rectangle. You use the same script we used in the basic tutorial to draw a square:

<script type="text/javascript">
  function draw () {
    var canvas = document.getElementById('rectangle');
    if (canvas.getContext) {
      var context = canvas.getContext('2d');
      
      context.fillStyle = "rgb(150,29,28)";
      context.fillRect (10,10,280,280);
    } else {
      // put code for browsers that don’t support canvas here
      alert("This page uses HTML 5 to render correctly. Other browsers may not see anything.");
    }
  }
</script>

Like in the previous tutorial, the two highlighted lines draw the rectangle. The context.fillStyle = "rgb(150,29,28)"; sets the fill color of the rectangle to a dark red (rgb(150,29,28)). You can set it to any RGB color you like just by changing the numbers.

Then the context.fillRect builds the rectangle. There are four values for the fillRect property:

context.fillRect(x,y,width,height);
  • horizontal starting coordinate (x)
  • vertical starting coordinate (y)
  • width of the rectangle
  • height of the rectangle

To draw a rectangle, imagine that your canvas is a grid with 0,0 in the upper left corner. First decide where the upper left corner of your rectangle should be on the grid. These are your x,y coordinates. Then decide how wide and tall your rectangle should be. These are your width and height numbers.

Remember that your canvas is only as large as you defined it in the HTML tag. So if you create a 300x300 canvas and then put in a 400x400 rectangle inside it at 0,0, your canvas will be completely covered by that rectangle. Any overlapping areas will simply be trimmed out of the picture.

For my filled rectangle example I drew a 280x280 square centered in my canvas with these codes:

context.fillStyle = "rgb(150,29,28)";
context.fillRect (10,10,280,280);

An outline of a rectangle is easy to do using context.strokeRect. It has the same values as fillRect. And you can change the color (from black) using context.strokeStyle.

context.strokeStyle = "color";
context.strokeRect(x,y,width,height);

But instead of filling in the rectangle with your fill color, it draws an outline of a rectangle in my stroke color (in this case “purple”). In my rectangle outline example, I drew the same 280x280 centered square. But I made it purple and just the outline.

context.strokeStyle = "purple";
context.strokeRect(20,20,260,260)

Once you have a filled or stroked shape on your canvas, you can clear the colors back to the background color with context.clearRect. Like the other two rectangle commands, it uses the same four values:

context.clearRect(x,y,width,height);

In my example, I drew a green 280x280 square and then put a clear rectangle on top of it.

context.fillStyle = "rgb(29,150,28)";
context.fillRect(10,10,280,280);
context.clearRect(100,100,100,100);

Several Rectangles Layered on Top of One Another

The rectangles on your canvas are drawn in the order that they show up in the code. So if you put the clearRect first and then place a filled rectangle (fillRect) on top of it, the cleared space will not show up. Think of it as layers like z-index and put the items you want on top last.

You can place as many rectangles as you want on your canvas. Overlapping ones will cover lower ones (unless you change the transparency, which I’ll talk about in a future tutorial). Here is the code for five layered rectangles, as seen in my example:

context.fillStyle = "rgb(150,29,28)";
context.fillRect(40,40,255,200);
context.fillStyle = "rgb(150,83,28)";
context.fillRect(10,10,50,50);
context.fillStyle = "rgb(17,90,90)";
context.fillRect(5,100,200,120);
context.fillStyle = "rgb(22,120,22)";
context.fillRect(200,200,90,90);
context.clearRect(80,170,100,70);

The top-most rectangle is a clear one to create the chunk bitten out of the red and teal rectangles.

Rectangles on Canvas Don’t Have to Be Boring

As you might already know, all computer graphics are square because of the pixels. So it is possible to build even very complex images and shapes using just rectangles. And if you’ve ever played nonogram or picross puzzle games you have seen some.

I used just a few rectangles to create a simple drawing in my canvas.

context.fillStyle = "rgb(91, 164, 216)";
context.fillRect(90,50,20,200);
context.fillRect(110,142,30,15);
context.fillRect(140,50,20,200);
context.fillRect(180,155,20,95);
context.fillRect(180,100,20,20);

Rectangles on Canvas Can Even Be Useful

Once you understand how to create a canvas, you can use JavaScript to create dynamic bar graphs that change depending upon the values in your script. My bar graph example is done with static values, but you could easily change those to variables and create a graph that adjusts with new information.

context.fillStyle = "rgb(150,29,28)";
context.fillRect(0,160,60,140);
context.fillStyle = "rgb(22,120,22)";
context.fillRect(60,20,60,280);
context.fillStyle = "rgb(17,90,90)";
context.fillRect(120,220,60,80);
context.fillStyle = "rgb(150,83,28)";
context.fillRect(180,5,60,295);
context.fillStyle = "rgb(29,150,28)";
context.fillRect(240,100,60,200);

Drawing rectangles on an HTML 5 canvas may seem basic and boring, but it gives you a lot of power for creating dynamic SVG images on your web pages. And while Internet Explorer 8 and below don’t support this tag, IE 9 does, and so it won’t be that long before you’ll be able to use this tag in all your pages.

©2014 About.com. All rights reserved.