Javascript 画布标记不'；如果使用CSS格式，则无法工作

我已经使用canvas HTML5标记和JavaScript创建了一个简单的web应用程序，它允许在按下鼠标时沿直线绘制。当我不使用任何CSS格式时，这很好用。然而，当我使用CSS格式时，这并不能正常工作：这条线远离鼠标所在的位置。

context=document.getElementById（'drawing'）.getContext（“2d”）；
//下面的代码通过检查addEventListener是否可用来确保与旧浏览器的兼容性
var EventUtil={
addHandler:函数（元素、类型、处理程序）{if（元素.addEventListener）{
元素。addEventListener（类型、处理程序、false）；
}else if（元素附件）{
元素.attachEvent（'on'+类型，处理程序）；
}否则{
元素['on'+type]=handler；}
},
removeHandler:函数（元素、类型、处理程序）{if（元素.removeEventListener）{
元素。removeEventListener（类型，处理程序，false）；
}else if（element.detachEvent）{
detachEvent（'on'+类型，处理程序）；
}否则{
元素['on'+类型]=null；}
}
} ;
//绘制画布相关函数
var clickX=新数组（）；
var clickY=新数组（）；
var clickDrag=新数组（）；
var涂料；
功能添加单击（x、y、拖动）
{
点击x，推送（x）；
clickY.push（y）；
单击拖动。推送（拖动）；
}
函数whenMousedown（）{
var mouseX=event.pageX-this.offsetLeft；
var mouseY=event.pageY-this.offsetTop；
油漆=真；
addClick（event.pageX-this.offsetLeft，event.pageY-this.offsetTop）；
重画（）；
};
使用MoveMove（）时的函数{
如果（油漆）{
addClick（event.pageX-this.offsetLeft，event.pageY-this.offsetTop，true）；
重画（）；
}
};
函数whenMouseup（）{
油漆=假；
};
函数whenMouseleave（）{
油漆=假；
};
函数重画（）{
context.clearRect（0,0，context.canvas.width，context.canvas.height）；//清除画布
context.strokeStyle=“#df4b26”；
context.lineJoin=“round”；
context.lineWidth=5；
对于（变量i=0；i
#容器{
保证金：自动；
宽度：800px；
高度：605px；
边框：1px实心；
}
#身体{
利润率：10px；
}
.标题{
保证金：自动；
宽度：455px；
颜色：蓝色；
垫底：10px；
}
#绘图{
宽度：780px；
高度：500px；
边框：1px实心；
保证金：自动；
}
#clearBtnDiv{
保证金：自动；
宽度：80px；
}
#clearBtn{
颜色：紫色；
字体大小：大号；
背景色：浅绿色；
宽度：80px；
}

绘画画布
欢迎来到绘画画布！！
样图
这是因为没有计算所有offsetParent元素offsetTop和offsetLeft。offsetLeft/Top仅将左边框的偏移像素返回到其第一个父对象，但您的#绘图画布将#body和#container和element作为父对象，当您将边距设置为居中时，还需要将这些边距和边框添加到鼠标事件中，因为您使用的是page.x作为基础
 代码是@github，请在这里共享。我发现通常不是CSS格式导致了这个问题，但这个问题是特定于设置canvas属性的高度和宽度。画布的这些属性应按以下方式设置：canvaObject.setAttribute（'width'，'475'）。此外，这在另一个问题中得到了很好的解释：回答得很好！谢谢你的链接！完全忽略了画布的h/w属性。我试图删除边距和填充，但没有解决问题。但是，当我从#绘图中删除下面的属性时，它没有正确对齐，但工作正常。宽度：780px；高度：500px；