//CSS
  #canvas-container {
  width: 100%;
  text-align:center;
  margin:auto;
  }
div.fullscreen:-webkit-full-screen {
width: 100%;
height: 100%;
}
div.fullscreen:-moz-full-screen {

width: 100%;
height: 100%;
}
//HTML
   <div id="canvas-container">
                <div class="fullscreen">
                    <canvas id="layer1" width="800" height="500"
                            style="position: absolute; z-index: 0; border:3px solid #EE6D00; "></canvas>
                    <canvas id="layer2" width="800" height="500"
                            style="position: absolute; z-index: 1; border:3px solid #EE6D00; "></canvas>
                    <canvas id="layer3" width="800" height="500"
                            style="position: relative;  z-index: 2; border:3px solid #EE6D00; "></canvas>
                </div>
   </div>
<button class="button" onclick="goFullscreen(); return false">max</button>
//JavaScript
var cn = document.getElementsByClassName("fullscreen");
function goFullscreen() {
        // Get the element that we want to take into fullscreen mode

        // These function will not exist in the browsers that don't support fullscreen mode yet,
        // so we'll have to check to see if they're available before calling them.

        if (cn.mozRequestFullScreen) {
            // This is how to go into fullscren mode in Firefox
            // Note the "moz" prefix, which is short for Mozilla.
            cn.mozRequestFullScreen();

        } else if (cn.webkitRequestFullScreen) {
            // This is how to go into fullscreen mode in Chrome and Safari
            // Both of those browsers are based on the Webkit project, hence the same prefix.
            cn.webkitRequestFullScreen();

        }

    }