HTML5 Canvas Scaling using getImageData and putImageData

Question

Is there any way to scale the canvas using getImageData and putImageData.Below is the snippet of code.



     var c=document.getElementById("myCanvas");
        var c2=document.getElementById("myCanvas2");
        var ctx=c.getContext("2d");
        var ctx2=c2.getContext("2d");
        ctx.fillStyle="red";
        ctx.fillRect(10,10,50,50);

        function copy(){
         var imgData=ctx.getImageData(10,10,50,50);
         ctx2.translate(133.333,0);
         ctx2.scale(0.75,1);
         ctx2.putImageData(imgData,10,70);
        }

I have tried this out http://jsbin.com/efixur/1/edit.

Thanks Ajain

Mikko Ohtamaa Mikko Ohtamaa · Accepted Answer · 2012-10-26T09:04:20

getImageData() and putImageData() are provided for raw pixel operations and thus scaling is not possible (unless you write a custom scaler in Javascript).

What you want is to use drawImage() and then use another <canvas> as source instead of <img>.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images#Scaling

HTML5 Canvas Scaling using getImageData and putImageData

1 Answers