title: Clear entire, transformed HTML5 Canvas while preserving context transform
body: <p>I want to zoom and pan an HTML5 Canvas by transforming the context using <code>translate()</code> and <code>scale()</code>, clearing the canvas, and then redrawing. Note that I am explicitly <em>not</em> calling <code>save()</code> and <code>restore()</code> around my transformations.</p>
  
  <p>If I perform the standard <code>ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)</code> then the entire visible canvas will not be cleared; downscaling or panning may cause this initial rectangle to not exactly cover the drawing area.</p>
  
  <p>If I perform the Webkit-friendly clearing method...</p>
  
  <pre><code>var w=canvas.width;
  canvas.width = 0;
  canvas.width = w;
  </code></pre>
  
  <p>...then the cumulative transformation of the context is reset.</p>
  
  <p>How can I best clear the entire canvas context without losing my transformation?</p>