Creating Rectangles with an Array

Question

5.00/5 (1 vote)

See more:

Hi
I am using HTML5 for the first time and would like to create a rectangle using an array which contains the x, y, w, h. I have a big array of objects and a working for loops to create them but I am having trouble using the array to write a rectangle without typing the values manually. Here is a shortened down and simplified version of what I have written.

JavaScript

var Box = new Array();
Box[0] = (10, 10, 10, 10);

c.fillStyle="black";
c.strokeRect(Room[0]);

If anyone could tell me how I could use this array in this way I would be very grateful.

Thanks.

Posted 6-Nov-12 12:51pm

IanMac91

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

enhzflep · Accepted Answer · 2012-11-06T14:31:00

Sure, you just specify each element of the array you'd like to use.
So, in your example - you have the number 10 repeated 4 times. I'll just plug them into .strokeRect to get a rect that has one corner at 10,10 and the other corner at 20,20

JavaScript

// array to hold all of our rooms
var houseRooms = [];

// first room
var curRoom = [10,10, 10,10];
houseRooms.push(curRoom);

// second room
curRoom = [20,20, 20,20];
houseRooms.push(curRoom);

// current index, lastIndex+1
var i, numRooms = houseRooms.length;
for (i=0; i<numRooms; i++)
{
  curRoom = houseRooms[i];
  c.strokeRect(curRoom[0], curRoom[1], curRoom[2], curRoom[3]);
}

Since houseRooms is an array, as are each of the elements it contains, we can avoid a step in the above loop and do the following instead.

JavaScript

var i, numRooms = houseRooms.length;
for (i=0; i<numRooms; i++)
{
  c.strokeRect(houseRooms[i][0], houseRooms[i][1], houseRooms[i][2], houseRooms[i][3]);
}

But that then brings me to another point - we can do this with less code again..

JavaScript

houseRooms.forEach( drawOutline );
function drawOutline(elem)
{
 c.strokeRect(elem[0], elem[1], elem[2], elem[3]);
}

or even more frugally, we don't even have to name the function, we can declare it in place.

JavaScript

houseRooms.forEach( function(e){c.strokeRect(e[0], e[1], e[2], e[3]);} );