如何在已经在pdf.js

Question

我正在使用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（帆布）;

我的代码中有错误吗？我搜索了很多来源，但我无法找到正确的。请帮助我解决这个问题。