Image Rotate - Resize Canvas Based On Image Height And Width

I want to rotate image but resize the canvas based on image's width and height. please see my code in JSFiddle. I am actually rotating an image based on canvas but my canvas has fi

Solution 1:

First initialize the canvas size when the image has loaded:

image.onload=function(){
    canvas.width = image.width;
    canvas.height = image.height;    
    ctx.drawImage(image,0,0);
}

Now you can use the angles as basis for the canvas size. If 0 or 180 degrees then use the same size as image, if not swap the dimensions:

if (degrees >= 360) degrees = 0;

 if (degrees === 0 || degrees === 180) {
     canvas.width = image.width;
     canvas.height = image.height;
 }
 else {
     // swap
     canvas.width = image.height;
     canvas.height = image.width;
 }

There is no need to clear the canvas as changing the size will clear it (otherwise it would only be needed if the image contained a transparency channel).

You also want to rotate the image around the center of canvas (not a big issue here though).

Modified fiddle