Kategorien
HTML5 Web Frontend WebGL

Canvas rotieren um 180 Grad

Zum rotieren eines Canvas um den Mittelpunkt um 180 oder 90 Grad, kann man folgende Funktion benutzen.

90 Grad = nach rechts drehen

180 Grad = auf den Kopf stellen

270 Grad/ -90 Grad = nach Links drehen

 

var x = document.createElement("canvas");
 var context = x.getContext("2d");
 rotateCanvas(180, context)

 

rotateCanvas= function(degree, context)
{
    context.translate( canvasWidth, canvasHeight);
    context.rotate(degree* Math.PI / 180);
    context.translate(0, 0);
    return context;
}