title: <canvas> at native resolution despite zooming, Retina
body: <p>So I have a &lt;canvas&gt; element in which I am drawing things. Vectory things, not pixel-pushing.  I would like this to display in the highest quality with the least resources under the largest range of viewing conditions.  Specifically, I want to ensure that there is a 1:1 mapping between canvas pixels and device pixels, to eliminate blurry, time-consuming pixel scaling operations.</p>
  
  <p>There are <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/" rel="nofollow noreferrer">a</a>
  <a href="https://github.com/component/autoscale-canvas" rel="nofollow noreferrer">few</a> <a href="http://blog.tripleaxis.com/optimising-html5-canvas-elements-for-retina-screens/" rel="nofollow noreferrer">things</a>
  I've seen about "Retina" displays (conclusion: devicePixelRatio is your friend), but they all assume viewing at 100% zoom.  Equally I've seen things about <a href="https://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers">detecting zoom level</a>, but it seems messy and hacky and imprecise 
  (not to mention <a href="https://github.com/tombigel/detect-zoom#read-this-detect-zoom-is-currently-unusable-for-desktop" rel="nofollow noreferrer">prone to breakage</a>).  In particular, imprecision is a problem as the entire point is to get a ratio of precisely 1:1.  (Plus I don't actually care about the zoom level itself, only about addressing native pixels.)</p>
  
  <p>So my questions, from pragmatic to philosophical:</p>
  
  <ol>
  <li><p>What is the preferred way of getting a 1:1 canvas in modern (== released in the past 6 months) browsers?  Do I really have to detect the device pixel ratio <em>and</em> the zoom (including checking for zoom changes) and calculate things from there?</p></li>
  <li><p>If I don't care about resource consumption, is a 2:1 canvas (native res on "Retina" displays, upto 200% zoom elsewhere) worth considering?  I'm assuming downscaling is less bad than upscaling.</p></li>
  <li><p>What are browser vendors' take on this?  Are there better solutions being worked on?  Or is zoom a detail they think web developers should have no need to worry about?  [Answered partially <a href="https://code.google.com/p/chromium/issues/detail?id=177836" rel="nofollow noreferrer">here</a>: many consider it important. There seems some indecision on whether devicePixelRatio should change with zoom level or whether a <a href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/fRWlQ3GvlVA" rel="nofollow noreferrer">new property</a> that allows user-specified zoom detection as well as device-specific DPI detection is the way forward.]</p></li>
  <li><p>How many people regularly browse the web at !100% zoom?  How many of them are using high DPI displays?  Are there stats?  [Answered <a href="https://groups.google.com/a/chromium.org/d/msg/blink-dev/fRWlQ3GvlVA/WE18Emqxu0QJ" rel="nofollow noreferrer">here</a>: about 10% of gmail users.]</p></li>
  </ol>