Canvas Bilder rotieren
Ich hatte mich damals doch sehr damit rumgeärgert, um den richtigen Mittelpunkt bei Rotationen heraus zu bekommen.
Hier ist meine Lösung für Rotationen um 90,180,270 Grad (select oder durch Auf- und Abrunden kann man das sicher stellen,
dass keine anderen Werte eingegeben werden).
var rotate=parseInt(this.rotate);
if(rotate>0){
if(rotate!=180){
ctx.canvas.width=height;
ctx.canvas.height=width;
}
else{
ctx.canvas.width=width;
ctx.canvas.height=height;
}
ctx.save();
ctx.translate(ctx.canvas.width/2,ctx.canvas.height/2);
ctx.rotate(((Math.PI / 180)*rotate));
ctx.drawImage(this.img.image,0-(width/2),0-(height/2),width,height);
ctx.restore();
}
else{
ctx.canvas.width=width;
ctx.canvas.height=height;
ctx.drawImage(this.img.image,0,0,width,height);
}