canvas rotate image 2

canvas rotate image 2

by pj_js15

HTML

<button id="clockwise">Rotate right</button>
<button id="counterclockwise">Rotate left</button>

CSS

body{ background-color: ivory; }
canvas{border:1px solid red;}

JavaScript

var canvas;

var angleInDegrees=0;

console.log('test');

var image=document.createElement("img");
image.onload=function(){
    
    drawRotated(0);
}
image.src="http://greekgear.files.wordpress.com/2011/07/bob-barker.jpg";

$("#clockwise").click(function(){ 
    angleInDegrees= (angleInDegrees + 90) % 360;
    //alert(angleInDegrees);
    drawRotated(angleInDegrees);
});

$("#counterclockwise").click(function(){ 
    if(angleInDegrees == 0)
        angleInDegrees = 270;
    else
        angleInDegrees= (angleInDegrees - 90) % 360;
    drawRotated(angleInDegrees);
});

function drawRotated(degrees){
    if(canvas) document.body.removeChild(canvas);
    
    canvas = document.createElement("canvas");
    var ctx=canvas.getContext("2d");
    canvas.style.width="50%";
    
    if(degrees == 90 || degrees == 270) {
		canvas.width = image.height;
		canvas.height = image.width;
    } else {
		canvas.width = image.width;
		canvas.height = image.height;
    }
    
    ctx.clearRect(0,0,canvas.width,canvas.height);
    if(degrees == 90 || degrees == 270) {
		ctx.translate(image.height/2,image.width/2);
    } else {
	    ctx.translate(image.width/2,image.height/2);
   }
    ctx.rotate(degrees*Math.PI/180);
    ctx.drawImage(image,-image.width/2,-image.height/2);
    
    document.body.appendChild(canvas);
}