Canvas Rotate and Fit

by Vijay Gujar

HTML

<canvas id="canvas" width=350 height=350></canvas><br>
<button id="clockwise">Clock Wise</button>
<button id="counterclockwise">Counter CW</button>

CSS

body{ background-color: white; }
canvas{border:1px solid green;}

JavaScript

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var currentDegrees=0;

var image=document.createElement("img");
image.src="http://i.imgur.com/8rmMZI3.jpg";
image.onload=function(){
					
    ctx.drawImage(image,0,0,canvas.height, canvas.width);
}


$("#clockwise").click(function(){ 
    currentDegrees+=30;
    drawRotated(currentDegrees);
});

$("#counterclockwise").click(function(){ 
    currentDegrees-=90;
    drawRotated(currentDegrees);
});

function drawRotated(degrees){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(canvas.width/2,canvas.height/2);
    ctx.rotate(degrees*Math.PI/180);
    
    ctx.drawImage(image,-canvas.width/2,-canvas.height/2, canvas.height, canvas.width);
    ctx.restore();
}