Javascript HTML画布绘制从右侧开始，而不是从顶部开始

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

这是我的代码笔链接：

---

您必须使用

画布偏移鼠标位置。getBoundingClientRect

var canvas=document.querySelector（“画布”）；
var容器=document.querySelector（“.col-md-4”）；
canvas.width=container.offsetWidth；
canvas.height=container.offsetHeight；
var c=canvas.getContext（'2d'）；
c、 fillStyle=“红色”；
c、 strokeStyle=“红色”；
c、 线宽=5；
c、 lineCap=“圆形”；
功能图（e）{
var rect=canvas.getBoundingClientRect（）；
var x=e.clientX-rect.left
变量y=e.clientY-rect.top
c、 lineTo（x，y）；
c、 笔划（）；
}
canvas.addEventListener（“mousemove”，draw）
.container{
位置：绝对位置；
左：50px；
顶部：25px
}
#帆布容器{
位置：相对位置；
宽度：200px；
高度：200px；
背景色：#f3f6f7；
}


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