HTML5 Canvas -- Drawing a game level, overlapping previously drawn rectangles - arrays

Question

I've been hacking away at this problem for the past three hours and cannot figure out where I went wrong. Basically, I'm trying to draw a tile-based "level" for a little game. As I understand it, the canvas should draw new rectangles on rectangles that have already been drawn.
I want to set it up so that there is one function that basically draws the background, and another function that draws the highlights on top of it. The "highlights" are the top of a wall, and the background shows the side of it. I want to draw the highlights on top because ideally I'd eventually like to draw a character in between them so the highlights would be on top of the character (as though it is behind the wall) while the background would be behind the character.
The background and shape of the level (without the highlight layer) looks like this: http://howtivity.com/leveldrawing
For some reason, I run into a lot of trouble trying to draw the highlights layer. I want to offset the layer 50px above the background layer to give the impression of a three dimension wall, and I want any blank spaces where there is no wall to be transparent so the background still shows. When I try drawing the layer with an almost identical function whose only difference is offsetting the layer 50px upward and set the no-wall fillStyle to transparent, it looks like this: http://howtivity.com/leveldrawing/highlight.html
I've set it up to print text so I could diagnose where it might be wrong, but the text has shown up correctly. I feel like I either misunderstood something about how the canvas is drawn, or have made some kind of error that I'm just not seeing.
<canvas height="600" width="1000" style="position: absolute; z-index: 0; background: transparent;" id="background">
</canvas>
<script>
var level =
[
[1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,1,0,0],
[1,0,1,0,1,1,0,1,0,1],
[0,0,0,0,0,1,0,0,0,1],
[1,0,0,0,0,0,0,1,1,1],
[1,1,1,1,1,1,1,1,1,1]
];
var bg = document.getElementById("background");
var bgContext = bg.getContext("2d");
var drawLevel = function() {
var levelDrawX = 0;
var levelDrawY = 0;
for (levelRow = 0; levelRow < 6; levelRow++)
{
for (levelCol = 0; levelCol < 10; levelCol++)
{
levelDrawX = (100 * levelCol);
if (level[levelRow][levelCol]==1)
{
bgContext.fillStyle = "#ffe680";
bgContext.fillRect(levelDrawX, levelDrawY, levelDrawX + 100, levelDrawY + 100);
} else {
bgContext.fillStyle = "#8dd35f";
bgContext.fillRect(levelDrawX, levelDrawY, levelDrawX + 100, levelDrawY + 100);
}
}
levelDrawY += 100;
}
};
var drawHighlights = function() {
var levelDrawX = 0;
var levelDrawY = 0;
for (levelRow = 0; levelRow < 6; levelRow++)
{
for (levelCol = 0; levelCol < 10; levelCol++)
{
levelDrawX = (100 * levelCol);
if (level[levelRow][levelCol]==1)
{
bgContext.fillStyle = "#000";
} else {
bgContext.fillStyle = "transparent";
}
bgContext.fillRect(levelDrawX, levelDrawY-50, levelDrawX+100, levelDrawY+50);
}
levelDrawY += 100;
}
};
drawLevel();
drawHighlights();
Any help would be really appreciated! Thank you!

Answer 1

I admit to being a bit confused about what you want in your finished design.
Do you want your drawHighlights() to add a semi-transparent "shadows" to your drawLevel()?
If so, you can do that by setting the context's globalAlpha which is the level of opacity.
var drawHighlights = function() {
var levelDrawX = 0;
var levelDrawY = 0;
bgContext.globalAlpha=0.8;
for (levelRow = 0; levelRow < 6; levelRow++)
{
for (levelCol = 0; levelCol < 10; levelCol++)
{
levelDrawX = (100 * levelCol);
if (level[levelRow][levelCol]==1)
{
bgContext.fillStyle = "#777";
} else {
bgContext.fillStyle = "transparent";
}
//bgContext.fillText(levelCol, levelCol*100, 10+levelRow*100);
bgContext.fillRect(levelDrawX, levelDrawY-50, levelDrawX+100, levelDrawY+50);
}
levelDrawY += 100;
}
bgContext.globalAlpha=1.0;
};

Answer 2

My mistake was with the values required by fillRect.
I had typed them as if they were:
fillRect(startX, startY, endX, endY);
when actually they are:
fillRect(startx, starty, width, height);