HTML 画布绘画从右侧而不是顶部开始答案

【问题标题】：HTML canvas painting start from right rather than topHTML 画布绘画从右侧而不是顶部开始
【发布时间】：2021-01-24 05:26:09
【问题描述】：

我尝试在画布上制作绘图应用程序。它在全屏下运行良好，但是当我根据 div 容器设置它的宽度和高度时。它没有正常工作。它从右侧而不是左上角开始绘画。

这是我的代码笔链接：https://codepen.io/pranaysharma995/pen/GRpGVmG。

div class="container">
        <div class="col-md-4 col-md-offset-4 " id="canvas-container">
<canvas id="canvas">
</canvas></div>


#canvas-container{
        position: relative;
        width: 600px;
        height: 600px;
        background-color: #f3f6f7;
    }

【问题讨论】：

标签： javascript html twitter-bootstrap html5-canvas

【解决方案1】：

你必须用canvas.getBoundingClientRect偏移鼠标位置

var canvas = document.querySelector("#canvas");
var container = document.querySelector(".col-md-4");
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;

var c = canvas.getContext('2d');
c.fillStyle = "red";
c.strokeStyle = "red";
c.lineWidth = 5;
c.lineCap = "round";


function draw(e) {
  var rect = canvas.getBoundingClientRect();
  var x = e.clientX - rect.left
  var y = e.clientY - rect.top

  c.lineTo(x, y);
  c.stroke();
}
canvas.addEventListener("mousemove", draw);

.container {
  position: absolute;
  left: 50px;
  top: 25px
}

#canvas-container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #f3f6f7;
}

<div class="container">
  <div class="col-md-4 col-md-offset-4 " id="canvas-container">
    <canvas id="canvas"></canvas>
  </div>
</div>

【讨论】：