How to Rotate Images Using JavaScript (JavaScript & Canvas). Cross-browser Solution. -- ajaxBlender.com

And for browsers that support the CNAVAS tag, the code will look like this:

var cContext = canvas.getContext('2d');

var cw = img.width, ch = img.height, cx = 0, cy = 0;

//   Calculate new canvas size and x/y coorditates for image
>switch(degree){
     case 90:
          cw = img.height;
          ch = img.width;
          cy = img.height * (-1);
          break;
     case 180:
          cx = img.width * (-1);
          cy = img.height * (-1);
          break;
     case 270:
          cw = img.height;
          ch = img.width;
          cx = img.width * (-1);
          break;
}

//  Rotate image
canvas.setAttribute('width', cw);
canvas.setAttribute('height', ch);
cContext.rotate(degree * Math.PI / 180);
cContext.drawImage(img, cx, cy);

We have to change the X/Y coordinates for drawImage function. Otherwise it will not be visible in the viewport (see Figure B versus Figure C on the illustration below).

Read full article from How to Rotate Images Using JavaScript (JavaScript & Canvas). Cross-browser Solution. — ajaxBlender.com