We are displaying Product image1 in site as below :

Now we are giving an option to upload image2 from Product view page using below code, and what we want is uploaded image2 should overlap on existed image1 like here.

but now when we upload image2, image1 is overlapping on image2.

code for upload image from product view page

html

<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>
<div class ="up1234">
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>
</div>

script

<script>
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:canvas.getWidth(), height:canvas.getHeight()});
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
    });
  };
  reader.readAsDataURL(file);
});
</script>

Display Product image :

<div id="case_canvas">
<?php echo $this->getChildHtml('media') ?>   
</div>

We Tried below code, but it did't worked for us

#case_canvas {
     z-index:-1;
}

also once we click on "Add to cart" button we need to save uploaded image. after user place an order , the image should display in backend [ order view page ] as like Default Magento File upload option

We are displaying Product image1 in site as below :

Now we are giving an option to upload image2 from Product view page using below code, and what we want is uploaded image2 should overlap on existed image1 like here.

but now when we upload image2, image1 is overlapping on image2.

code for upload image from product view page

html

<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>
<div class ="up1234">
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>
</div>

script

<script>
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:canvas.getWidth(), height:canvas.getHeight()});
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
    });
  };
  reader.readAsDataURL(file);
});
</script>

Display Product image :

<div id="case_canvas">
<?php echo $this->getChildHtml('media') ?>   
</div>

We Tried below code, but it did't worked for us

#case_canvas {
     z-index:-1;
}

also once we click on "Add to cart" button we need to save uploaded image. after user place an order , the image should display in backend [ order view page ] as like Default Magento File upload option

In Product view page, In place of Product image, I want to display "canvas of fiberjs" kind of image as here

in the link, it looks like normal image, but its not.

Is i need to use some libraries like http://fabricjs.com/

after placing canvas image, we want to provide an option to upload image for customer , so that it will overlap the canvas image.

when i searched whole internet i didt found any usefull idea.

We are displaying Product image1 in site as below :

Now we are giving an option to upload image2 from Product view page using below code, and what we want is uploaded image2 should overlap on existed image1 like here.

but now when we upload image2, image1 is overlapping on image2.

code for upload image from product view page

html

<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>
<div class ="up1234">
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>
</div>

script

<script>
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:canvas.getWidth(), height:canvas.getHeight()});
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
    });
  };
  reader.readAsDataURL(file);
});
</script>

Display Product image :

<div id="case_canvas">
<?php echo $this->getChildHtml('media') ?>   
</div>

We Tried below code, but it did't worked for us

#case_canvas {
     z-index:-1;
}

also once we click on "Add to cart" button we need to save uploaded image. after user place an order , the image should display in backend [ order view page ] as like Default Magento File upload option