鼠标在画布上的位置

Question

此Meteor客户端代码尝试使用mousemove使用fillRect在画布上绘图，但鼠标移动的位置与绘图发生的位置不同。

'mousemove canvas.signature': function(event) {
    let canvas = event.target;
    let ctx = canvas.getContext('2d');
    ctx.fillStyle = "#000";
    ctx.fillRect(event.clientX, event.clientY, 1, 1);
}

canvas.signature {
    background-color: yellow;
    width: 10em;
    height: 10em;
}

当我将鼠标水平移动到黄色框的顶部时，整个宽度不仅没有按比例绘制，而且它的位置太低了，这个画线的图像发生了。
有什么问题以及如何解决？感谢