title: How redraw on canvas resize without blurring?
body: <p>When the canvas element is resized (via the style changing) I also want to scale the canvas' drawn image as well. I cannot just change the height/width as this causes the canvas to clear itself, so I do:</p>
  
  <ol>
  <li>Create a temporary canvas element</li>
  <li>Draw the current canvas' image onto that temporary canvas</li>
  <li>Resize the current canvas</li>
  <li>Draw the temp canvas' image back to the current canvas but scaled to the new size</li>
  </ol>
  
  <p>This results in some blurring - very noticeable after many resizes (example: when dragging to resize). How would I do this without any blurring?</p>
  
  <p><strong>EDIT:</strong> Turning off image smoothing (<code>context.webkitImageSmoothingEnabled = false;</code>) does <em>not</em> fix the problem, it simply makes it redraw it more and more jagged until the image looks nothing like the original after a number of resizes.</p>
  
  <p><strong>Called on resize event:</strong></p>
  
  <pre><code>    var tmpCanvas = null;       
  
      //Make a temporary canvas
      tmpCanvas = document.createElement( "canvas" );
  
      //Set its size to be equal
      tmpCanvas.height = originalCanvas.height;
      tmpCanvas.width = originalCanvas.width;
  
      //Draw our current canvas onto it
      tmpCanvas.getContext( "2d" ).drawImage( originalCanvas, 0, 0 );
  
      //Set new dimensions
      originalCanvas.width = originalCanvas.offsetWidth;
      originalCanvas.height = originalCanvas.offsetHeight;
  
      var originalContext = originalCanvas.getContext( "2d" );
  
      //Set background and colors
      originalContext.fillStyle = "#ffffff";
      originalContext.strokeStyle = "#000000";
  
      //Set paintbrush
      originalContext.lineWidth = 4;
      originalContext.lineCap = "round";
  
      //Fill background as white
      originalContext.fillRect( 0, 0, originalCanvas.width, originalCanvas.height );
  
      //We have a saved signature
      if ( SignatureCanvas.hasSignature === true )
      {
          //Draw it back but scaled (results in blurred image)
          originalContext.drawImage( tmpCanvas, 0, 0, tmpCanvas.width, tmpCanvas.height, 0, 0, originalCanvas.width, originalCanvas.height );
  
          /** 
           * This results in a blurred image as well
           //Draw it back but scaled
           originalContext.scale( originalCanvas.width / tmpCanvas.width, originalCanvas.height / tmpCanvas.height );
           originalContext.drawImage( tmpCanvas, 0, 0, tmpCanvas.width, tmpCanvas.height, 0, 0, tmpCanvas.width, tmpCanvas.height );
           */
      }
  </code></pre>
  
  <p>Is there a way to get the strokes and "scale" all those points and redraw?</p>