Если ты берёшь растр из маленького канваса, да ещё в Jpeg то результат и вправду будет лажовый.
Давай попробуем обойтись без того чтобы забирать данные из канвас, вместо этого источником данных всегда будет оригинальное изображение.
Берём морду кота вырезаем crop И масштабируем вырезанный результат на весь доступный канвас с поворотом на 90градусов, обрати внимание что в качестве мы не теряем
<b>Зум в канвас. В большой и в маленький</b></br>
<canvas id="myCanvas" width="500" height="500"></canvas>
<canvas id="myCanvas2" width="70" height="70"></canvas>
<br/> <b>original</b><br/>
<img id="test" src="http://rsm.haber365.com/N/1296202473_22_kedicik-22.jpg">
<script>
function zoomAndRotate(imageObj,ctx,x,y,width,height){
ctx.rotate(90 * Math.PI / 180);
ctx.translate(0,-ctx.canvas.width);
ctx.drawImage(imageObj, x, y, width,height,0,0,ctx.canvas.width,ctx.canvas.height);
ctx.setTransform(1, 0, 0, 1, 0, 0);
//return ctx.getImageData(0, 0, width, height);
}
function drawImage(imageObj) {
//example 1
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var zoomResult=zoomAndRotate(imageObj, context, 160,140,260,250);
//example 2
var canvas2 = document.getElementById('myCanvas2');
var context2 = canvas2.getContext('2d');
var zoomResult2=zoomAndRotate(imageObj, context2, 160,140,260,250);
}
document.getElementById('test').onload=function(){
drawImage(this);
}
</script>
Если нужно вырезать часть из вырезанной картинки то нужно вновь брать растр из оригинальной картинки но не в коем случае не из канваса в который масштабировал иначе будет ужасный результат