Comment redimensionner des images sur un html5 canvas avec une meilleure interpolation?

Tout d'abord: que suis-je en train de faire?

J'ai une application pour l'affichage des images. Il utilise l'élément canvas pour le rendu de l'image. Vous pouvez effectuer un zoom avant, vous pouvez effectuer un zoom arrière, et vous pouvez le déplacer. Cette partie fonctionne parfaitement maintenant.

Mais disons que j'ai une image avec beaucoup de texte. Il dispose d'une résolution de 1200x1700, et ma toile a 1200x900. Initialement, lors d'un zoom arrière, ce qui conduit à une résolution de ~560x800.

Mon dessin ressemble à ceci:

drawImage(src, srcOffsetX, srcOffsetY, sourceViewWidth, sourceViewHeight,
destOffsetX, destOffsetY, destWidth, destHeight);

Un petit texte sur cette image semble vraiment, vraiment mauvais, surtout quand on le compare à d'autres visionneuses d'images (par exemple, IrfanView), ou même html < img > élément.

J'ai compris que les navigateurs algorithme d'interpolation est la cause de ce problème. En comparant les différents navigateurs ont montré que le Chrome rend échelle images du mieux, mais pas encore assez.

Bien j'ai cherché dans tous les coins de la Interwebs pendant 4 à 5 heures d'affilée et ne pas trouver ce dont j'ai besoin. J'ai trouvé le "imageSmoothingEnabled" option "image-rendu de" styles CSS qui vous ne pouvez pas l'utiliser sur toile, rendu à flotteur de positions et de nombreux JavaScript implémentations des algorithmes d'interpolation (ceux qui sont loin à ralentir pour mon usage).

Vous pouvez vous demander pourquoi je vous raconte tout cela: pour vous faire gagner du temps à me donner des réponses, je sais déjà

Donc: est-il tout bon et rapide façon d'avoir une meilleure interpolation? Mon idée est de créer un objet image, redimensionner ce (parce img a une bonne interpolation lors de l'échelle!) et le rendre ensuite. Malheureusement, l'application de img.la largeur ne semble affecter la largeur d'affichage...

Mise à jour: Merci à Simon, j'ai pu résoudre mon problème.
Voici la dynamique de mise à l'échelle de l'algorithme que j'ai utilisé. Avis de conserver les proportions, la hauteur paramètre est uniquement pour éviter plus de flotteur de l'informatique. Il ne échelles en bas à droite maintenant.

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 < 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);
    }