Using multiple in-memory canvases, javascript

I'm trying to make a 2D, html5 canvas game. I need to use in-memory canvases to optimize the render process, since everything needs to be drawn 3 times every frame (using 3 "layers of light").

An image describing what I want to do: http://ift.tt/1Cx5ncJ

My render function:

function render(){
renderBackground(mainCanvasContext);
frontCanvasContext.clearRect(0, 0, frontCanvas.width, frontCanvas.height);
player.render(frontCanvasContext);
for (var i = 0; i < RenderManager.LIGHT_LAYERS; i++) {
    mainCanvasContext.save();
    mainCanvasContext.beginPath();
    mainCanvasContext.globalAlpha = RenderManager.BASE_ALPHA + RenderManager.ALPHA_STEP * i;
    renderManager.renderLayer(mainCanvasContext, i); // This function draws shapes representing the light. Every layer is brighter than the previous one.
    mainCanvasContext.closePath();
    mainCanvasContext.clip();
    mainCanvasContext.drawImage(backCanvas, 0, 0); // Maze is predrawn on this canvas. The walls don't change so this is only drawn once, after the assets load.
    mainCanvasContext.drawImage(frontCanvas, 0, 0);
    mainCanvasContext.restore();
    }
}

The problem: The contents of backCanvas are missing. This is beacuse of clearRect(). canvas.width = canvas.width doesn't do anything in my FireFox. Everything works correctly if I don't use frontCanvas at all (replace " mainCanvasContext.drawImage(frontCanvas, 0, 0);" with "player.render(mainCanvasContext);"). How do I clear frontCanvas so that both the contents of frontCanvas and backCanvas are visible?

I'm ready to provide additional info if necessary.