ользую pdf.js здесь я рендеринг моего PDF на холсте,

Мой код:

   <div id="viewerContainer" tabindex="0">
   <div id="viewer" class="pdfViewer"></div>
   </div>

Вышеуказанный холст генерируется через viewer.js

Теперь я пытаюсь нарисовать прямоугольник на моем PDF, но это не показывает мой прямоугольник,

Мой скрипт ниже:

<script type="text/javascript">
          var canvas, context, startX, endX, startY, endY;
          var mouseIsDown = 0;

          function init() {
              canvas = document.getElementById("page1");
              context = canvas.getContext("2d");

              canvas.addEventListener("mousedown", mouseDown, false);
              canvas.addEventListener("mousemove", mouseXY, false);

              canvas.addEventListener("mouseup", mouseUp, false);
          }

          function mouseUp() {
              if (mouseIsDown !== 0) {
                  mouseIsDown = 0;
                  drawSquare(); //update on mouse-up
              }
          }

          function mouseDown() {
              mouseIsDown = 1;
              startX = endX = event.clientX - canvas.offsetLeft; //remember to subtract
              startY = endY = event.clientY - canvas.offsetTop; //canvas offset
              drawSquare(); //update
          }

          function mouseXY(eve) {

              if (mouseIsDown !== 0) {
                  if (!eve) {
                      var eve = event;
                  }
                  endX = event.pageX - canvas.offsetLeft;
                  endY = event.pageY - canvas.offsetTop;

                  drawSquare();
              }
          }

          function drawSquare() {
              // creating a square
              var width = Math.abs(startX - endX);
              var height = Math.abs(startY - endY);

              context.clearRect(0, 0, context.width, context.height);
              //or use fillRect if you use a bg color

              context.beginPath();
              context.rect(startX, startY, width, height);
              context.fillStyle = "yellow";
              context.fill();
              context.lineWidth = 7;
              context.strokeStyle = 'black';
              context.stroke();
          }
      </script>   

viwer.js code:

 var canvasWrapper = document.createElement('div');
  canvasWrapper.style.width = div.style.width;
 canvasWrapper.style.height = div.style.height;
 canvasWrapper.classList.add('canvasWrapper');
 if (this.annotationLayer && this.annotationLayer.div) {
   div.insertBefore(canvasWrapper, this.annotationLayer.div);
   } else {
     div.appendChild(canvasWrapper);
     }
   var textLayer = null;
   if (this.textLayerFactory) {
    var textLayerDiv = document.createElement('div');
    textLayerDiv.className = 'textLayer';
    textLayerDiv.style.width = canvasWrapper.style.width;
    textLayerDiv.style.height = canvasWrapper.style.height;
   if (this.annotationLayer && this.annotationLayer.div) {
              div.insertBefore(textLayerDiv, this.annotationLayer.div);
            } else {
              div.appendChild(textLayerDiv);
            }
            textLayer = this.textLayerFactory.createTextLayerBuilder(textLayerDiv, this.id - 1, this.viewport, this.enhanceTextSelection);
          }
 var viewport = this.viewport;
 var canvas = document.createElement('canvas');
 canvas.id = this.renderingId;
 canvas.setAttribute('hidden', 'hidden');
 var isCanvasHidden = true;
 var showCanvas = function showCanvas() {
 if (isCanvasHidden) {
 canvas.removeAttribute('hidden');
 isCanvasHidden = false;
}

}; canvasWrapper.appendChild (холст);

Есть ли ошибка в моем коде? Я искал много источников, но я не смог найти правильный. Пожалуйста, помогите мне в этом вопросе.