Canvas HTML5画布的缩放问题

我正在使用pdf.js在画布中显示pdf。当用户双击画布时，我在画布上画了一条前面有X的线。只要我保持视口的比例=1，这就可以工作。一旦我将比例增加到2或更高，就不会在用户实际单击的位置绘制线。它弄乱了Y坐标

在整个页面上运行演示

$function{ var$canvas=$myCanvas； var canvasEl=$canvas.get0； var ctx=canvasEl.getContext2d； var行=[]； var backupCanvas=document.createElementcanvas； var loadingTask=pdfjsLib.getDocument'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'; 加载task.promise.thenfunctiondoc{ console.log此文件有+doc.\u pdfInfo.numPages+个页面； doc.getPage1.thenpage=>{ //将比例增加到2 var量表=2； var viewPort=page.getViewportscale； canvasEl.width=viewPort.width； canvasEl.height=viewPort.height； canvasEl.style.width=100%； canvasEl.style.height=100%； var wrapper=document.getElementByIdwrapperDiv； wrapper.style.width=Math.floorviewPort.width/scale+'px'； wrapper.style.height=Math.floorviewPort.height/scale+'px'； page.render{ 画布背景：ctx， 视口：视口 }.然后=>{ storeCanvas； }; }; }; 函数storeCanvas{ backupCanvas.width=canvasEl.width； backupCanvas.height=canvasEl.height； backupCanvas.ctx=backupCanvas.getContext2d； backupCanvas.ctx.drawImagecanvasEl，0,0； } 功能恢复{ ctx.drawImagebackupCanvas，0,0； } $canvas.dblclick函数{ var mousePos=getMousePoscanvasEl，e； 变量行={ startX:0， 斯塔蒂：老鼠皮， endX：画布宽度， 恩迪：老鼠皮， 佩吉：佩吉 }; 线。推线； drawLineline，lines.length-1； }; 函数drawLineline，索引{ //划线 ctx.beginPath； ctx.strokeStyle='df4b26'； ctx.moveToline.startX，line.startY； ctx.lineToline.endX，line.endY； ctx.closePath； ctx.stroke； //添加删除标记 var top=line.pageY； 左侧变量=画布宽度+20； 变量$a=$ .数据线索引 .attrstyle，线条高度：0 .css{ 顶:顶,， 左:左,， 位置：'绝对' } .htmlx .点击功能{ var index=$this.dataline-index； $.w-remove-line.remove； ctx.clearRect0，0，canvasEl.width，canvasEl.height； //还原画布 恢复性NVAS； 第1行，索引1； 对于变量i=0；i在双击的事件处理程序中，只需将Y位置乘以标尺2

var line = {
  startX: 0,
  startY: mousePos.Y * 2,
  endX: canvasEl.width,
  endY: mousePos.Y * 2,
  pageY: e.pageY
};