Add multiple images on lower canvas using fabric.js

My Goal is to add interactive element on a pdf dynamically.

I am trying to add image over a canvas using https://github.com/RavishaHesh/PDFJsAnnotations,

Added a tool with http://fabricjs.com/interaction-with-objects-outside-canvas.

fabric.Image.fromURL("http://localhost/img/test-image.png" , function(img) {

                fabricObj.add(img.set({
                    left: event.clientX - fabricObj.upperCanvasEl.getBoundingClientRect().left,
                    top: event.clientY - fabricObj.upperCanvasEl.getBoundingClientRect().top,
                    angle: 0,
                    opacity: 1
                }).scale(1));
                
                inst.active_tool = 0;
            });
        }

This code is working and adding an image but it is replacing the canvas that contain the pdf with the new image.

I want to add multiple image without losing the canvas that contains my pdf-canvas data.

I will try to create a jsfiddle to make this question more understandable, will edit the question or add that in the comment.

Here is the working codesendbox: https://codesandbox.io/s/hardcore-shape-gt8do

Background is removing for some canvas when add image by clicking on image icon than on canvas.