Overlap Image2 On Image1

We are displaying image1 in site as below : Now we are giving an option to upload image2, and what we want is uploaded image2 should overlap on existed image1 like here. but now

Solution 1:

Add

#case_canvas {
     z-index:-1 
}

to your css. This will position the canvas with the outline of the case behind any uploaded pictures. However make sure that the uploaded picture is then correct size. e.g by .scale(x) or by setting the width to some proportion of canvas width, because the way it is now, it will cover the whole canvas, if it's big enough, and the case won't be visible at all.

Solution 2:

FabricJs adds it's own canvas elments to your DOM, There are 2: one upper canvas basically handling events and lines for drag/resize, the lower canvas for rendering images or objects.

Instead of adding another one, you should use the fabricJS framework only, defining your background image as fabric.Image. You can customize it so it cannot be modified by your user.

Adding a z-index or restructuring your html may fix your current issues but trust me: It's not the way you want to go.