Нарисуйте прямоугольник на холсте с загруженным файлом PDF, используя pdf.js

Question

Я пытаюсь нарисовать прямоугольник над PDF-файлом. Когда я рисую прямоугольник в PDF, прямоугольник не рисуется должным образом.

Я хочу рисовать только один прямоугольник за раз, когда я рисую новый прямоугольник, старый прямоугольник следует удалить, но этого не происходит.

Вот мой код: -

Рендеринг кода pdf (Рендеринг работает правильно)

function pdfFile (file) {
pdfjsLib.workerSrc = 'pdf.worker.js';
pdfjsLib.getDocument(file).promise.then(function(pdfDoc) {
  pdf = pdfDoc;
  document.getElementById('page_count').textContent = pdfDoc.numPages;
  showButtonGroup(pdf);
  renderPage(pageNum);
});
} 

 function renderPage(num) {
    pageRendering = true;
    pdf.getPage(num).then(function(page) {
      var viewport = page.getViewport({scale: scale});
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      var renderContext = {
        canvasContext: ctx,
        viewport: viewport
      };
      var renderTask = page.render(renderContext);
      renderTask.promise.then(function() {
        pageRendering = false;
        if (pageNumPending !== null) {
          renderPage(pageNumPending);
          pageNumPending = null;
        }
      });
    });

    document.getElementById('page_num').textContent = num;
}

Функция перемещения мыши не работает должным образом

function mouseMove(e) {
    if (drag) {
        ctx.putImageData(pdfPages[pageNum], 0, 0);
        ctx.clearRect(rect.startX, rect.startY, rect.w, rect.h);
        rect.w = ((e.pageX - x) - this.offsetLeft) - rect.startX;
        rect.h = ((e.pageY - y) - this.offsetTop) - rect.startY;      
        ctx.strokeStyle = color;
        ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
        Object.assign(data, {
            x: rect.startX,
            y: rect.startY,
            w: rect.w,
            h: rect.h
        })
        console.log(data);
    }
}

Примечание

1. Когда я включаю функции clearRect и putImageData, тогда прямоугольник рисуется правильно, но холст pdf отображается пустым. Вот прикрепленное изображение
2. Если активирована только функция clearRect, то отображается несколько прямоугольников в формате PDF. Вот прикрепленное изображение

Спасибо,

Викрам