// boring boilerplate

var $=document.getElementById.bind(document);

var cv=$('cv');

var ctx=cv.getContext('2d');

var bt=$('bt');

​

// load image

var face=new Image();

face.onload=function () {

  ctx.drawImage(face, 0,0);        

}

face.src='http://i.stack.imgur.com/9HBVV.jpg';

​

// 

var eyebrowMiddle = {x:245,y:210};

var noseMiddle = {x:280,y:250};

var eyeBrowTargetPosition = {x:cv.width/2, y:cv.height/3 };

​

​

bt.onclick = function rotate() {

  ctx.save();

  // go to default center position

  ctx.translate(eyeBrowTargetPosition.x, eyeBrowTargetPosition.y);

  // compute angle 

  var yDelta = noseMiddle.y - eyebrowMiddle.y;

  var xDelta =  noseMiddle.x - eyebrowMiddle.x ;

  var angle = Math.atan2 (yDelta ,xDelta);

  // compensate for angle

  ctx.rotate(angle);

  //draw image centering input on eyebrow

  ctx.drawImage(face, -eyebrowMiddle.x, -eyebrowMiddle.y);

  ctx.restore();

};

​