3 layered canvas in Html5

I'm trying to create a simple game, but I'm wondering how to implement 3 layered in canvas, somehow like in a photoshop. I want the background to be as background, the transparent one would be something it can reflect the background to the foreground and foreground layer would be the main animations/rendering. Will that be a good point for performance? Also, how to implement the 3 layered structure here?

HTML

<div id ="container">
        <canvas id = "canvas_background" width = "800" height = "500">
            <canvas id = "canvas_trans" width = "800" height = "500">
                <canvas id = "canvas_foreground" width = "800" height = "500">

                </canvas>
            </canvas>
        </canvas>
    </div>

CSS

#container {
width: 800px;
margin: 20px auto;
height: 200px;
}

#canvas_background{
border: 1px solid #666;
position: absolute;
}

#canvas_trans{
position: absolute;
background-color: transparent;
z-index: 1;
}

#canvas_foreground{
position: absolute;
 }