Dibujar en un canvas rotado (Transform rotate)

[oquille]

Hola a todos.

Tengo un canvas dentro de un div y realizo dibujos dentro de ese canvas por medio del ratón. Hasta aquí todo perfecto.

Primero calculo el origen del canvas:

origen_x = coordenada_raton_x - origen_div_x;
origen_y = coordenada_raton_y - origen_div_y;

Para el trazado de los dibujos:

x = coordenada_raton_x - origen_div_x;
y = coordenada_raton_y - origen_div_y;

El problema surge cuando giro el div con la matriz transform. El trazo del ratón ya no sigue el ratón sino que va por otro lado.

He intentado seguir las transformación de puntos (entre otras cosas), por ejemplo
nuevox = xcosenoangulo - ysenoangulo
nuevoy = yconsenoanulo + xsenoanuglo

Pero nada, no doy con la transformación para que el puntero del ratón vaya con el trazo

Muchas gracias

[Panino5001]

Sin ver más de tu código, es difícil ayudarte. Pero podemos ensayar elsiguiente pseudocódigo:

Código:

//antes de rotar
context.save();
aquí rotamos
//inmediatamente después de rotar:
context.restore();

[marlanga]

¿Te acordaste de que las operaciones trigonométricas en javascript van en radianes?
https://jsfiddle.net/marlanga/c6p4qbq5/