HTML Canvas - fill with background color, and then overlay a PNG

I'm trying to make a canvas have a background color, and then overlay a PNG above it.

This is the png texture:

 ‏

for example, If backgroundColor = #D95753 (bright-red), the canvas filling levels will be:

1.- Setting the background color

2.- Overlaying the png above the background color

That's the code I have, but it is not working. you can't see the background color, only the png image.

var background = new Image();
background.src = "http://i.stack.imgur.com/LF1P0.png";
background.height = y; // set it before
background.width = x; // set it before

ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, background.width, background.height);

background.onload = function() {
    ctx.drawImage(background,0,0, background.width, background.height);
    memeEverything();
}

Thanks!