避免画布

Question

我需要帮助尝试在画布中表示线条。使用鼠标绘制线条，当我尝试使画布响应时，我的问题出现了。 当我在桌面上绘制线条时你并没有真正看到失真，但是当画布加载到移动设备中并且我绘制一条水平线时，结果表明它保持了圆形的形状＆＃34;这一点，但在垂直线条中，点在两侧变窄，因此线条变窄。因为很难解释我出现的图片我可以更好地说明你：

我还提供了一个我正在使用的代码的示例，因此您可以更好地了解我所说的内容：

//getting the mouse coords    
function getMousePos(canvas, evt) {
            var rect = canvas.getBoundingClientRect();

            scaleX = canvas.width / rect.width,    /*relationship bitmap vs. element for X*/
            scaleY = canvas.height / rect.height;  /*relationship bitmap vs. element for Y*/
            return {
              x: Math.round((evt.clientX - rect.left)*scaleX),
              y: Math.round((evt.clientY - rect.top)*scaleY)
            };

          }

在画布的上下文中我说：

ctx.lineJoin="round";

完整的代码在这里：

https://jsfiddle.net/rhwcbwwL/20/ 提前谢谢!!