How to Add PNG image on multiple selected pages in pdf using hopding/pdf-lib

I am using pdf-lib package for adding images in pdf.I have stored page numbers as key and fabricjs’s objects as json(later i am getting png out it) as the value in Dictionary. Now I am iterating that dictionary to see if the page has images then add it on pdf.

async saveAsPDf(){
    let pdfBytes;
    const pages = this.pdfDoc.getPages();
    let url;
    this.storage.get('pageCanvasJson').subscribe(async (pagesCanvas:{}) => {
        for(let page in pagesCanvas){
            if(pagesCanvas[page].objects.length>0){
                this.canvas.loadFromJSON(pagesCanvas[page],()=>{
                    url = this.rasterize();
                })
            const pngBytes = await fetch(url).then((res) => res.arrayBuffer());
            const pngImage = await this.pdfDoc.embedPng(pngBytes);
            const currentPage = pages[+page-1];
            const { width, height } = currentPage.getSize();    
            const pngDim = pngImage.scale(width / this.size.width);
            currentPage.drawImage(pngImage, {
                x: 0,
                y: 0,
                width: pngDim.width,
                height: pngDim.height,
            });
            pdfBytes = await this.pdfDoc.save();
            this.pdfDoc = await PDFDocument.load(pdfBytes)
        }
        }           
    });
    pdfBytes = await this.pdfDoc.save();
    var blob = new Blob([pdfBytes], {
        type: "application/pdf",
    });
    FileSaver.saveAs(blob, this.pdfName);
    this.clearPdfSrc.emit("clear")
    this.pdfSrc="";
    this.canvas.clear();

}

I am getting png base64 correctly. my logic is re-loading pdf bytes that I get after saving png image on one page.
above code is not working, I don’t know where I am making mistake. I am getting pdf with no changes.

Source: Angular Questions