Rotate: Girar el canvas

Este método gira el canvas un ángulo dado por el argumento del método en radianes. El centro de giro es el origen de coordenadas, la esqina superior izquierda si no se ha aplicado ninguna vez translate()

Si aplicas un rotate(0.75) a partir de ahora todos los dibujos que se hagan aparecerán rotados a la derecha un ángulo de 0.75 radianes. Si usas un argumento negativo el giro se hace hacia la izquierda, contrario a las agujs del reloj (cuando los relojes eran de agujas)

Recuerda que el argumento es el ángulo en radianes, esa unidad que nunca terminaste de entender en el colegio. REcuerda que para pasar de grados a radianes la fórmula es muy simple:

radianes = grados*Math.PI/180

Así que π radianes es media vuelta y 2·π es una vuelta completa. Fácil. Siquieres cambiar el centro de giro debes usar translate()

<canvas width="600" height="300" id="mipanel" style="border: 1px solid black"></canvas>
<script> 
	var miLienzo = document.getElementById("mipanel");
	var lapiz = miLienzo.getContext("2d");
	lapiz.fillStyle="red";
	lapiz.rotate(10*Math.PI/180);
	lapiz.fillRect(150, 0, 100, 100);
</script> 
Prueba este código

Si vuelves a aplicar este método los cambios se harán sobre los valores actuales, no sobre los originales. Es decir si vuelves a hacer un rotate(35*Math.PI/180) el nuevo rectángulo girará otros 35º más un total de 45º respecto a la situación original (la por defecto). Las rotaciones se acumulan

Si quieres cambiar el centro de giro tienes que usar la traslación de coordenadas. En este ejemplo se gira el rec´tangulo sobre su propio centro. Para ello trasladomos el origen de coordenadas al centro del rectángulo, giramos y luego revertimos el cambio de coordenadas.

<canvas width="600" height="300" id="mipanel" style="border: 1px solid black"></canvas>
<script> 
	var miLienzo = document.getElementById("mipanel");
	var lapiz = miLienzo.getContext("2d");
	lapiz.fillStyle="red";
	lapiz.fillRect(150, 25, 100, 100); //rectágulo normal sin transformaciones    
	lapiz.translate(200, 75);   // ponemos el origen en el centro del rectángulo 
	//mover horizontal : x+ancho/2   vertical: y+alto/2
	lapiz.rotate(45*Math.PI/180);
	lapiz.translate(-200, -75);  //revertir el cambio de origen 
	lapiz.fillStyle = "blue";
	lapiz.fillRect(150, 25, 100, 100);
</script> 
Prueba este código