Javascript I'；我正在制作一个基于绘图的web应用程序和I'；我使用HTML画布来处理图形，但是图形向右偏移了很多？

下面是生成与图片大小相关的画布并允许用户在画布上绘制的代码。我看过另一篇StackOverflow帖子，上面也有同样的问题，但没有相关的答案。我知道问题的原因是画布从300 x 150的标准比例拉伸，并且在数学上而不是物理上绘制在正确的位置。如何修复此问题？

您可以发布完整的代码吗？上面的例子缺少映射变量。请发布您试图实现的内容，我注意到您已经编写了图形向右偏移了很多，但这并不能回答您试图修复的内容

const map = document.getElementById('map')
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const grid = document.getElementById('grid')
function resize() {
    canvas.width = map.offsetWidth
    canvas.height = map.offsetHeight

    ctx.width = map.offsetWidth
    ctx.height = map.offsetHeight
}
resize();
grid.appendChild(canvas)
canvas.style.gridColumn = 2
canvas.style.gridRow = 1



let pos = { x: 0, y: 0 };

window.addEventListener('resize', resize);
document.addEventListener('mousemove', draw);
document.addEventListener('mousedown', setPosition);
document.addEventListener('mouseenter', setPosition);

function setPosition(e) {
    pos.x = e.clientX;
    pos.y = e.clientY;
}



  function draw(e) {
    if (e.buttons !== 1) return;
  
    ctx.beginPath();
  
    ctx.lineWidth = 5;
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#c0392b';
  
    ctx.moveTo(pos.x, pos.y);
    setPosition(e);
    ctx.lineTo(pos.x, pos.y);
  
    ctx.stroke();
  }