Javascript multi-layer canvas

HTML

<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;">

JavaScript

var mainCanvasContext = document.getElementById("myCanvas").getContext("2d");

        /* Creates our layer's array */
        var layers = [];

        function addNewLayer(layers) {
          /* Creates the layer as a new canvas */
          var layer = document.createElement("canvas");
          var layerContext = layer.getContext("2d");

          /* Clears the canvas */
          layerContext.clearRect(0, 0, 400, 200);

          /* Adds it to our layers array */
          layers.push(layer);

          /* Returns the new layer to use it straight away */
          return layer;
        }
        
        /* Draws each layer on top of the other */
        function drawImage(canvasContext, layers) {
          /* Clears the original canvas */
          canvasContext.clearRect(0, 0, 400, 200);
          for(var i = 0; i < layers.length; i++) {
            canvasContext.drawImage(layers[i], 0, 0);
          }
        }
        
        /* Creates new layer and adds a square to it */
        var newLayer = addNewLayer(layers);
        var newLayerContext = newLayer.getContext("2d");
        newLayerContext.fillStyle = "#FF0000";
        newLayerContext.fillRect(0, 0, 80, 100);

        /* Creates new layer and adds a square to it */
        newLayer = addNewLayer(layers);
        newLayerContext = newLayer.getContext("2d");
        newLayerContext.fillStyle = "#00FF00";
        newLayerContext.fillRect(10, 10, 80, 100);

        /* Creates new layer and adds a square to it */
        newLayer = addNewLayer(layers);
        newLayerContext = newLayer.getContext("2d");
        newLayerContext.fillStyle = "#0000FF";
        newLayerContext.fillRect(20, 20, 80, 100);

        /* On each change to the layers, draw the image again */
        drawImage(mainCanvasContext, layers);