JS, Canvas - ctx.drawImage() is not working

Question

I'm making a game with JavaScript and HTML5, and currently trying to draw a nighttime image ontop of the canvas to darken the corners. One line of code draws an image perfectly without fail, but on the next, nothing appears to happen. The image is definitely loaded - I can append it to the body as a normal image element:

function renderViewport() {
    console.log("rendering...");
    ctx.clearRect(0, 0, 608, 608);
    var xpos = 0;
    var ypos = 0;
    var n;
    for (var x = charX - 9; x <= charX + 9; x++) {
        if (x >= 0 && x < xs) {
            for (var y = charY - 9; y <= charY + 9; y++) {
                if (y >= 0 && y < ys) {
                    n = x * xs + y;
                    sprite = backSprites[n];
                    ctx.drawImage(terrain, sprite, 0, 32, 32, xpos, ypos, 32, 32);
                }
                ypos += 32;
            }
        }
        ypos = 0;
        xpos += 32;
    }
    var sprite = getYou();
    ctx.drawImage(you, sprite, 0, 32, 32, 288, 288, 32, 32);
    ctx.drawImage(dark, 32, 0, 32, 32, 0, 0, 608, 608);
}

So the second to last line draws 'you' exactly where and how I want, but the last does nothing at all. I'll be very grateful for any help, and can provide an example if required, thank you.

Example: http://students.challoners.com/ts/jspg_0.2/
You can find the 'dark' image at /textures/dark01.png

I forgot to mention that I'm trying to scale the image up at the same time, and the game is 19x19 32x32 'pixels' in size.

Answer 1

I think I have the solution. It looks like you are setting 32px on a 19px sprite, for the dark image. So if you do the following, it should work fine. (Downloaded your files and tested it locally and it worked).

ctx.drawImage(dark, 19, 0, 19, 19, 0, 0, 608, 608);