[DjDiablo]

Лови второй пример с тремя последовательными увеличениями без обращения к данным в канвасе.
Координаты crop в zoom указываются в процентах тобишь от 0(0%) до 1 (100%).

<b>три зума, каждый последующий увеличивает картинку из предыдущего</b></br>
<canvas id="myCanvas" width="250" height="250"></canvas>
<canvas id="myCanvas2" width="250" height="250"></canvas>
<canvas id="myCanvas3" width="250" height="250"></canvas>

<br/> <b>original</b><br/>
<img id="test"  src="http://rsm.haber365.com/N/1296202473_22_kedicik-22.jpg">

<script>
     function zoom(imageObj,ctx,x,y,width,height,opt){
         opt=opt||{};
         var w=opt.w||imageObj.width;
         var h=opt.h||imageObj.height;
         var offsetX=opt.x||0;
         var offsetY=opt.y||0;

	     ctx.drawImage(imageObj, (x*w)+offsetX, (y*h)+offsetY, width*w,height*h, 0,0,ctx.canvas.width,ctx.canvas.height); 
         ctx.setTransform(1, 0, 0, 1, 0, 0);

         return {
            w:w*width,
            h:h*height,
            x:(x*w)+offsetX,
            y:(y*h)+offsetY
         }
      }


      function drawImage(imageObj) {
        //zoom 1
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var zoomResult=zoom(imageObj, context, 0.2,0.2, 0.5,0.5);
 
        //zoom 2
        var canvas2 = document.getElementById('myCanvas2'); 
        var context2 = canvas2.getContext('2d');
        var zoomResult2=zoom(imageObj, context2,  0.3, 0.33, 0.4,0.4, zoomResult);

 
        //zoom 3
        var canvas3 = document.getElementById('myCanvas3'); 
        var context3 = canvas3.getContext('2d');
        var zoomResult3=zoom(imageObj, context3,  0.1, 0.08, 0.4, 0.4, zoomResult2);
      }

      document.getElementById('test').onload=function(){
           drawImage(this);
      }
</script>