Desenvolvo um aplicativo de tela HTML5 e envolve a leitura de um arquivo xml que descreve a posição de setas, retângulos e outras formas que preciso desenhar na tel

Exemplo do layout XML:

<arrow left="10" top="20" width="100" height="200" rotation="-40" background-color="red"/> 
<rect left="10" top="20" width="100" height="200" rotation="300" background-color="red"/> 

Se o objeto for girado, isso envolverá o cálculo da posição de um ponto (chamado P, a nova posição do objeto após a rotação) quando girado em torno de outro ponto (esquerdo, superior). Estou tentando criar uma função / fórmula geral que possa ser usada para calcular esse ponto P, mas minha matemática é um pouco fraca e não consigo identificar qual fórmula de arco / tangente devo usar.

Pode me ajudar a criar uma fórmula que eu possa usar para calcular o ponto P para rotações que podem ser positivas e negativa

No exemplo acima: point (14.446) é o ponto superior esquerdo (226.496) e o ponto médio do objeto quando NÃO é girado, de modo que o ponto = (esquerdo + largura / 2, superior + altura / 2) e o ponto azul é o ponto médio quando girado. Eu sei como calcular o comprimento da linha entre os pontos (14.446) e (226.496), mas não como calcular o ponto azul x, posição y - BTW: o comprimento dessa linha é o mesmo que a linha entre o ponto azul e (14.446)

len = sqrt( (496-446)^2 + (226-14)^2 );
    = 227.56;