title: How to scale images on a html5 canvas with better interpolation?
body: <p>First of all: what am I trying to do?</p>
  
  <p>I have an application to view images. It uses the canvas element to render the image. You can zoom in, you can zoom out, and you can drag it around. This part works perfectly right now.</p>
  
  <p>But let's say I have an image with a lot of text. It has a resolution of 1200x1700, and my canvas has 1200x900. Initially, when zoomed out, this leads to a rendered resolution of ~560x800.</p>
  
  <p>My actual drawing looks like this:</p>
  
  <pre><code>drawImage(src, srcOffsetX, srcOffsetY, sourceViewWidth, sourceViewHeight,
  destOffsetX, destOffsetY, destWidth, destHeight);
  </code></pre>
  
  <p>Small text on this image looks really, really bad, especially when compared to other image viewers (e.g. IrfanView), or even the html &lt; img > element.</p>
  
  <p>I figured out that the browsers interpolation algorithm is the cause of this problem. Comparing different browsers showed that Chrome renders scaled images the best, but still not good enough.</p>
  
  <p>Well I searched in every corner of the Interwebs for 4-5 hours straight and did not find what I need. I found the "imageSmoothingEnabled" option, "image-rendering" CSS styles which you can not use on canvas, rendering at float positions and many JavaScript implementations of interpolation algorithms (those are <strong>far</strong> to slow for my purpose).</p>
  
  <p>You may ask why I am telling you all of this: to save you the time to give me answers I already know</p>
  
  <p>So: is there <strong>any</strong> good and fast way to have better interpolation? My current idea is to create an image object, resize this (because img has good interpolation when scaled!) and render it then. Unfortunately, applying img.width seems only to affect the displayed width...</p>
  
  <p><strong>Update</strong>: Thanks to Simon, I could solve my problem.
  Here is the dynamic scaling algorithm I used. Notice that it keeps the aspect ratio, the height parameter is only for avoiding more float computing. It only scales down right now.</p>
  
  <pre><code>scale(destWidth, destHeight){
          var start = new Date().getTime();
          var scalingSteps = 0;
          var ctx = this._sourceImageCanvasContext;
          var curWidth = this._sourceImageWidth;
          var curHeight = this._sourceImageHeight;
  
          var lastWidth = this._sourceImageWidth;
          var lastHeight = this._sourceImageHeight;
  
          var end = false;
          var scale=0.75;
          while(end==false){
              scalingSteps +=1;
              curWidth *= scale;
              curHeight *= scale;
              if(curWidth &lt; destWidth){
                  curWidth = destWidth;
                  curHeight = destHeight;
                  end=true;
              }
              ctx.drawImage(this._sourceImageCanvas, 0, 0, Math.round(lastWidth), Math.round(lastHeight), 0, 0, Math.round(curWidth), Math.round(curHeight));
              lastWidth = curWidth;
              lastHeight = curHeight;
          }
          var endTime =new Date().getTime();
          console.log("execution time: "+ ( endTime - start) + "ms. scale per frame: "+scale+ " scaling step count: "+scalingSteps);
      }
  </code></pre>