Javascript 如何在画布中绘制pdf.js中已有的矩形

我在这里使用pdf.js在画布中呈现我的pdf

我的代码是：

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

})； canvaswapper.appendChild（canvas）

---

我的密码有错误吗？我找了很多资料，但找不到正确的。请在这个问题上帮助我

你有一些怪癖，比如

window.event

-是一个IE讨厌的东西，即使chrome没有充分的理由来实现它，-你应该尽量避免它，

context

没有

width

或

height

属性，但这些都不应该与你的问题相关。适合我：谢谢你的回复，Canvas是从pdf格式的viewer.js创建的，所以我无法在html代码中找到它。请发布一条消息，很抱歉，我正在从本地机器加载pdf并使用pdf viewer查看，现在我必须绘制任何类似矩形或圆形的东西。我将在这里添加查看器js代码

<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>   

 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;
}