javascript - Overlap image2 on image1 -

we displaying image1 in site below :

now giving option upload image2, , want uploaded image2 should overlap on existed image1 here.

but when upload image2, image1 overlapping on image2.

var canvas = new fabric.canvas('canvas');  document.getelementbyid('file').addeventlistener("change", function (e) {    var file = e.target.files[0];    var reader = new filereader();    reader.onload = function (f) {      var data = f.target.result;                          fabric.image.fromurl(data, function (img) {       // var oimg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);  	  var oimg = img.set({left: 0, top: 0, angle: 00, width: canvas.getwidth(), height: canvas.getheight()});        canvas.add(oimg).renderall();        var = canvas.setactiveobject(oimg);        var dataurl = canvas.todataurl({format: 'png', quality: 0.8});      });    };    reader.readasdataurl(file);  });      var img = new image();  img.onload = function() {    //draw after loading    var canvas = document.getelementbyid('case_canvas');    var ctx = canvas.getcontext("2d");    ctx.drawimage(img, 0, 0, img.naturalwidth, img.naturalheight);  }    img.src = "http://i.stack.imgur.com/xgnw7.png";  //^^ start loading image

/*.canvas-container {    background: url("http://i.stack.imgur.com/xgnw7.png") no-repeat fixed center;      }    */      .canvas-container {   width: 300px; height: 500px;  position: relative; -webkit-user-select: none; top:900px;   }      #canvas   {    border: 1px solid black;    top:500px;  }    #file  {  	position:relative;top:900px;  }    .lower-canvas    {  	position: absolute; width: 300px; height: 500px; bottom:400px; left: 0px; -webkit-user-select: none;  }    .upper-canvas {  position: absolute; width: 300px; height: 500px; left: 0px; top: 0px; -webkit-user-select: none; cursor: default;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>  <input  type="file" id="file"><br />  <canvas id="canvas" width="450" height="450"></canvas>	    <div class="canvas-container">  <canvas id="case_canvas" width="300" height="500" class="lower-canvas" ></canvas>  <canvas class="upper-canvas " width="300" height="500" ></canvas>  </div>

once click on run code snippet, please scroll down bit see results.

add

#case_canvas {      z-index:-1  } 

to css. position canvas outline of case behind uploaded pictures. make sure uploaded picture correct size. e.g .scale(x) or setting width proportion of canvas width, because way now, cover whole canvas, if it's big enough, , case won't visible @ all.