My current program requires drawing literally tens of thousands rectangles in a canvas. These rectangles are either grey or red, depending on what they represent. Currently it takes about 5 seconds to draw 100.000 of those rectangles, while the preceding calculations only take less than 100ms. Gladly I'd like to optimise this drawing part of the program, because I feel like I'm missing a major part in optimisation here.

My current drawing code is as follows:

```
function colourRect(i) {
    // Those calculations are for the exact coordinates of the squares in the map
    ctx.rect(((1 + (i - 1) * 12) - settingsWidth * 12 * parseInt((i - 1) / settingsWidth)), (1 + (parseInt((i - 1 / settingsStart) / settingsWidth) * 12) - (parseInt((settingsStart - 1 / settingsStart) / settingsWidth) * 12)), 10, 10);
}

canvas = document.getElementById("map");
ctx = canvas.getContext("2d");

ctx.beginPath();
var i = 0;
ctx.fillStyle = "#CCC";
while(i <= parseInt(settingsEnd)) {
    if($.inArray(i, grey) == -1) { colourRect(i); }
    i = i + 1;
}
ctx.closePath();
ctx.fill();

ctx.beginPath();
var i = 0;
ctx.fillStyle = "#900";
while(i <= parseInt(settingsEnd)) {
    if($.inArray(i, grey) != -1) { colourRect(i); }
    i = i + 1;
}
ctx.closePath();
ctx.fill();

```

Edit note: Colour swapping corrected to happen only twice in total.
Edit note 2: Correct small mistake in array naming (there's only one array, not two)