I want to add fabric image on PDFJS. so I write my react code below.

useEffect(async()=>{
    await delay(1500)
    let iframe = document.getElementsByTagName("iframe")
    //get <iframe> from pdf.js
    let canvasList = iframe[0].contentWindow.document.getElementsByTagName("canvas")
    let pageInput = iframe[0].contentWindow.document.getElementById("pageNumber")
    
    pageInput.addEventListener("change",()=>{
      //it works every page changing event
      setPage(pageInput.value)
    })

    for await (let el of canvasList) {
      //canvas id init for block error
      el.id = ""
    }
    canvasList[page-1].id="a" // give id for make fabric canvas object

    var canvas = new fabric.Canvas(canvasList[page-1].id);
    canvas.add(
      // add fabric image
      new fabric.Rect({
        left: 50,
        top: 50,
        height: 50,
        width: 50,
        fill: "red"
      })
    );
    canvas.renderAll();
  },[page])

explanation of code I got iframe element from Pdfjs. It has canvas element which has pdf page. after, i refer id of canvas element and makes fabric canvas object according to document of fabric finally, i made image and add it

problem All image always located behind of PDFjs. so I can't see, select, control :(

problem image

I add images but I can't see them

I Want