Straighten image in HTML5 canvas by rotating from the center of the image and zoom -

instagram has great straighten feature https://help.instagram.com/135826209959819

where if straighten image rotate center of image , zoom.

rotating in canvas rotates not center(i think 0,0)

and zoom zooms towards 0,0

context.rotate(.01) context.scale(2.2, 2.2) 

do know way force canvas rotate center, zoom towards center?

cheers

to answer question...you can set desired rotation point using:

context.translate(desiredrotationx,desiredrotationy) 

this causes context.rotate rotate around desired rotation point.

but note: proper rotation point of unstraightened image might/might not center of image. depends on original rotation point of original image.

perhaps better way of straightening image to:

• find top-left , top-right corner points of image.

• determine angle of line connecting 2 points.

• rotate image negative of angle.

example code , demo:

var canvas1=document.getelementbyid("canvas1");  var ctx1=canvas1.getcontext("2d");    var canvas=document.getelementbyid("canvas");  var ctx=canvas.getcontext("2d");  var $canvas=$("#canvas");  var canvasoffset=$canvas.offset();  var offsetx=canvasoffset.left;  var offsety=canvasoffset.top;  var scrollx=$canvas.scrollleft();  var scrolly=$canvas.scrolltop();    var cw,ch,topleft,topright,bottomright,bottomleft;  var pt,pr,pb,pl;    var img=new image();  img.crossorigin='anonymous';  img.onload=start;  //        img.src="https://dl.dropboxusercontent.com/u/139992952/multple/tiltedcw.png";  img.src="https://dl.dropboxusercontent.com/u/139992952/multple/tiltedccw.png";  function start(){    cw=canvas.width=img.width;    ch=canvas.height=img.height;    ctx.drawimage(img,0,0);      calccorners();      $("#canvas").mousedown(function(e){handlemousedown(e);});  }      function handlemousedown(e){    e.preventdefault();    e.stoppropagation();             mx=parseint(e.clientx-offsetx);    my=parseint(e.clienty-offsety);      var dt=calcdistance(mx,my,pt);    var dr=calcdistance(mx,my,pr);    var db=calcdistance(mx,my,pb);    var dl=calcdistance(mx,my,pl);      if(dt<dr && dt<db && dt<dl){      topleft=pt;      topright=pr;      bottomright=pb    }else if(dr<dt && dr<db && dr<dl){      topleft=pr;      topright=pb;      bottomright=pl;    }else if(db<dt && db<dr && db<dl){      topleft=pb;      topright=pl;      bottomright=pt;    }else{      topleft=pl;      topright=pt;      bottomright=pr;    }        // straighten    var dx=topright.x-topleft.x;    var dy=topright.y-topleft.y;    var angle=math.atan2(dy,dx);    var width=math.sqrt(dx*dx+dy*dy);    dx=bottomright.x-topright.x;    dy=bottomright.y-topright.y;    var height=math.sqrt(dx*dx+dy*dy);      canvas1.width=width;    canvas1.height=height;    ctx1.rotate(-angle);    ctx1.drawimage(img,-topleft.x,-topleft.y);    }    function calcdistance(mx,my,p){    var dx=mx-p.x;    var dy=my-p.y;    return(math.sqrt(dx*dx+dy*dy));  }    function calccorners(){    var data=ctx.getimagedata(0,0,cw,ch).data;      // pt (topmost)    for(var y=0;y<ch;y++){      for(var x=0;x<cw;x++){        var n=(y*cw+x)*4+3;        if(!pt &&data[n]>40){ pt={x:x,y:y}; break; }      }}    // pr (rightmost)    for(var x=cw-1;x>=0;x--){      for(var y=ch-1;y>=0;y--){        var n=(y*cw+x)*4+3;        if(!pr &&data[n]>40){ pr={x:x,y:y}; break; }      }}    // pb (bottommost)    for(var y=ch-1;y>=0;y--){      for(var x=cw-1;x>=0;x--){        var n=(y*cw+x)*4+3;        if(!pb &&data[n]>40){ pb={x:x,y:y}; break; }      }}    // pl (leftmost)    for(var x=0;x<cw;x++){      for(var y=0;y<ch;y++){        var n=(y*cw+x)*4+3;        if(!pl && data[n]>40){ pl={x:x,y:y};  break; }      }}  }

body{ background-color: white; }  canvas{border:1px solid purple;}  #red{color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <h4>original: tilted transparency</h4>  <h4 id=red>click near top-left corner of image</h4>  <canvas id="canvas" width=300 height=300></canvas><br>  <h4>straightened</h4>  <canvas id="canvas1" width=300 height=300></canvas>