I want to rotate image but resize the canvas based on image's width and height. please see my code in js fiddle "http://jsfiddle.net/6ZsCz/1123/". I am actually rotating an image based on canvas but my canvas has fixed height and width so the image is just rotating inside. all i want something like this. Please check my attached screenshot. green border is a canvas so if i rotate 90 degree then canvas should expand the height and show the entire image.
Can you please help?
HTML
<canvas id="canvas" ></canvas><br>
<button id="clockwise">Rotate right</button>
Javascript
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var degrees=0;
var image=document.createElement("img");
image.onload=function(){
ctx.drawImage(image,0,0,image.width,image.height);
}
image.src="http://www.ajaxblender.com/article-sources/images/plane-1.jpg";
$("#clockwise").click(function(){
degrees+=90
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
ctx.translate(image.width/2,image.height/2);
ctx.rotate(degrees*Math.PI/180);
ctx.drawImage(image,0,0,image.width,image.height,-image.width/2,-image.height /2,image.width,image.height);
ctx.restore();
});