title: JavaScript either strokeRect or fillRect blurry depending on translation
body: <p>Earlier on I noticed that <code>strokeRect</code> (and any other method that involved stroke such as <code>lineTo</code>) created a grey 2 px wide line instead of a 1px wide black line. After some Google searching I found that <code>context.translate(0.5, 0.5)</code> fixed this. but now <code>fillRect</code> (and like before any other method that involves <code>fill</code>) creates a black box with a grey border around it.</p>
  
  <p>Does anyone know a good way to make it so that both fillRect and strokeRect have crisp edges with no grey borders? I also don't know whether or not I should use <code>context.translate(0.5, 0.5)</code> for images, as it seems like SVGs have crisp edges regardless of whether or not I translate.</p>
  
  <p>Here is a jsfiddle demonstrating this: <a href="http://jsfiddle.net/Tysonzero/ydm21pkt/1/" rel="nofollow">http://jsfiddle.net/Tysonzero/ydm21pkt/1/</a></p>
  
  <p>Note that the bottom strokeRect is crisp while the top one is blurry, and the top fillRect is crisp while the bottom one is blurry.</p>