HTML5 Canvas Scaling using getImageData and putImageData
getimagedata, html, html5-canvas, putimagedata
Solution
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
Problem
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