title: HTML5 Canvas lines not having consistent width
body: <p>I'm drawing a rectangle on HTML5 canvas using the below code:</p>
  
  <pre><code>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();   
  </code></pre>
  
  <p>The problem is that the two vertical lines are a lot thicker than the two horizontal lines, what is causing this?</p>
  
  <p>EDIT: I have height set at <code>89</code> and width set at <code>802</code>. When I remove the height the rectangle no longer distorts.</p>