title: Html5 Canvas - drawing perfect lines using fabric.js or without
body: <p>I am creating a game, I need to achieve a perfect canvas line on HTML5 under different types of screen resolutions and zooms.</p>
  
  <p>To easily understand I am talking about, simply paste the two different codes into an HTML file(not jsFiddle, as it is too small to notice):</p>
  
  <p>With fabric.js:</p>
  
  <pre><code>&lt;canvas id = "c" width = "600" height = "300"&gt;&lt;/canvas&gt;
  &lt;script src = "https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"&gt;&lt;/script&gt;
  
  &lt;script&gt; var c=document.getElementById("c");
   var context=c.getContext("2d");
   new fabric.Canvas('c', { selection: false });
   context.moveTo(0, 0);
   context.lineTo(0, 300);
   context.stroke();
  &lt;/script&gt;
  </code></pre>
  
  <p>Without fabric.js:</p>
  
  <pre><code>&lt;canvas id = "c" width = "600" height = "300"&gt;&lt;/canvas&gt;
  &lt;script&gt; var c=document.getElementById("c");
   var context=c.getContext("2d");
   context.moveTo(0, 0);
   context.lineTo(0, 300);
   context.stroke();
  &lt;/script&gt;
  </code></pre>
  
  <p>Now as you can see, fabric.js removes the blurriness that you get under different kind of browser zooms(Mouse wheel) once the page loads.
  I have two problems with it though:</p>
  
  <p>1) Once you click on the canvas the line is gone
  2) It's a big framework/library, and I only need it to draw lines(Maybe not if it can achieve the same thing with PNG images)</p>
  
  <p>So, is there a way to achieve the same sharpness result with a clean, short javascript code, without using fabric.js?
  If not, how can I fix the clicking problem?</p>
  
  <p>Thanks.</p>