title: Canvas drawings, like lines, are blurry
body: <p>I have a <code>&lt;div style="border:1px solid border;" /&gt;</code> and canvas, which is drawn using:</p>
  
  <pre><code>context.lineWidth = 1;
  context.strokeStyle = "gray";
  </code></pre>
  
  <p>The drawing looks quite blurry (lineWidth less than one creates even worse picture), and nothing near to the div's border. Is it possible to get the same quality of drawing as HTML using canvas? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ctx = document.getElementById("canvas").getContext("2d");
  ctx.lineWidth = 1;
  ctx.moveTo(2, 2);
  ctx.lineTo(98, 2);
  ctx.lineTo(98, 98);
  ctx.lineTo(2, 98);
  ctx.lineTo(2, 2);
  ctx.stroke();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    border: 1px solid black;
    width: 100px;
    height: 100px;
  }
  canvas, div {background-color: #F5F5F5;}
  canvas {border: 1px solid white;display: block;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;tr&gt;&lt;td&gt;Line on canvas:&lt;/td&gt;&lt;td&gt;1px border:&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;&lt;canvas id="canvas" width="100" height="100"/&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>