HTML5画布线条宽度不一致

我正在HTML5画布上使用以下代码绘制一个矩形：

canvasId = $('#objectData').find('#miImages '+imageId+' .imageContainer canvas').attr("id");
canvas = document.getElementById(canvasId);
context = canvas.getContext("2d");
context.beginPath();
context.rect(coordinateArray[0],coordinateArray[1],coordinateArray[2],coordinateArray[3]);  
context.lineWidth = 2;
context.strokeStyle = "DarkBlue";
context.stroke();   

问题是两条垂直线比两条水平线厚很多，这是什么原因造成的

---

编辑：我的高度设置为

89

，宽度设置为

802

。当我移除高度时，矩形不再扭曲。

我用CSS调整画布的大小，而不是用JavaScript调整画布的大小。我用下面的代码修复了这个问题

function applyCanvasSize(){
  $("#objectData img").on('load', function(){
    var theHeight = $(this).height();
    var canvasId = $(this).next('canvas').attr('id');
    var canvas = document.getElementById(canvasId);
    if (canvas.getContext) { 
      canvas.width = 802;
      canvas.height = theHeight;
    }
  });
}

---

有点晚，但有同样的问题。

---

在我的代码中，我使用style.width和style.height更改画布的大小。直接使用宽度和高度代替。最后没有“px”（因此只接受像素？）。你再也不会得到失真了。

坐标数组中的值是什么？它们可能是非整数吗？使用IE，Chrome，FF中的（11,10150100）我没有得到任何失真。vales输入可以更改，但示例是

3,65,43,60

使用这些坐标我没有得到任何失真。您是在移动设备或电视监视器上观看吗？不是，我是在笔记本电脑上观看。请参阅编辑到原始帖子。