在画布上绘制时位置不正确-HTML&；JAVASCRIPT

我在绘图画布中有一张图片，我将其设置为如下代码所示：

<div class="two40">
   <img class = "hidden" src="lungs.PNG"width="100%" height="300" id="lungs">
   <canvas height="300px" style="background:transparent; width: 100%; height: 300" id="specialLung"></canvas>
 </div>


function draw(){                
     var drawing = document.getElementById("specialLung");
     var con = drawing.getContext("2d");
     var image = document.getElementById("lungs");
     con.drawImage(image, 0, 0, drawing.offsetWidth, 300);

 }

函数draw（）{
var drawing=document.getElementById（“specialLung”）；
var con=drawing.getContext（“2d”）；
var image=document.getElementById（“肺部”）；
con.drawImage（图像，0，0，drawing.offsetWidth，300）；
}

这里的目标是在鼠标单击的位置绘制一个圆。我面临的问题是，圆圈的绘制位置与鼠标单击位置不同，它有一个左上角的偏移

画布如果放在div下。 结构如下

<div>
  <div> 
     !!some code    
  <div>
  <div>
     !!Canvas and picture code
  </div>
<div>

!!一些代码
!!画布和图片代码

那么，问题可能是什么？我错过了什么！

---

首先要感谢您，您对画布的css

高度使用了无效的值，
300
应该是
300px

即使这样，您也在使用css拉伸画布，而不是向画布缓冲区添加像素。您可以使用
ctx.fillRect（10,10,30,30）
在画布上绘制一个正方形来测试这一点：您将看到它实际上是一个矩形。你需要做点什么来抵消这一点

我假设你不是想用css缩放画布，而是想让你的方块变成方块。在这种情况下，您知道的是您希望画布的宽度与父画布的宽度相同，因此您可以按字面意思执行：

parentElement.addEventListener（'resize'，function（）{canvas.width=parentElement.getBoundingClientRect（）.width}）

此时，画布将具有具有正确像素纵横比的父画布的全宽，但会出现一个问题，即画布的内容将被重新绘制，因为通过javascript元素的变量更改画布的
宽度和
高度将导致重设绘图缓冲区。你不必担心这意味着什么，但你仍然需要找到一种方法来保存这些内容，如果这是你的目标的话

一个相当合理的解决方案是创建一个虚拟画布

var virtualCanvas = document.createElement( 'canvas' ),
    virtualCtx = virtualCanvas.getContext( '2d' );
virtualCanvas.height = canvas.height; // or 300

然后，在调整大小事件侦听器中更改
canvas.width
之前，将
virtualCanvas
的宽度设置为调整大小之前的画布宽度，并使用
virtualCtx.drawImage（canvas，0，0）在虚拟画布上绘制当前画布以存储它。您很可能不会遇到alpha通道的问题，因为更改
virtualCanvas
的宽度也会删除其中的所有内容

此时，您需要做的就是使用
ctx.drawImage（virtualCanvas，0，0）将
virtualCanvas的图形读入
canvas
，你就是黄金