Canvas rotar dibujo sin movimiento

[patilanz]

Hola tengo la siguiente función:

Código Javascript:

pj.draw=function(x,y,width,height,rotate){
    width=width||pj.width;
    height=height||pj.height;
    rotate=rotate||this.rotate;
    c.save();
    c.setTransform(1,0,0,1,0,0);
    c.translate(x+.5*width,(y+height/2)+.5*height);
    c.rotate(rotate*Math.PI/180);
    
    c.fillStyle=pj.color1;
    c.fillRect(-.5*width,-.5*height,width,height/2);
    
    x-=x+width/2;
    y-=y+height;
 
    c.fillStyle=pj.color2;
    c.beginPath();
        c.moveTo(x,y+height/2);
        c.lineTo(x+width,y+height/2);
        c.lineTo(x+width/2,y);
        c.lineTo(x,y+height/2);
    c.closePath();
    c.fill();
    c.restore();
}
 

Los parámetros pueden ser cualquiera. El problema es que el objeto se dibujo bien pero al rotar cambia ligeramente su posición, como evitar esto?

Saludos

[marlanga]

Se evita haciendo que el centro del objeto coincida con la coordenada 0,0 al hacer la translación del contexto; y haciendo que las instrucciones de dibujo posteriores actúen como si el centro estuviera en 0,0.

[patilanz]

Iniciado por marlanga

Se evita haciendo que el centro del objeto coincida con la coordenada 0,0 al hacer la translación del contexto; y haciendo que las instrucciones de dibujo posteriores actúen como si el centro estuviera en 0,0.

Lo he intentado hacer con c.translate(x+.5*width,(y+height/2)+.5*height);
y luego para facilitar el dibujo del objeto he restado a la x y a la y:
x-=x+width/2;
y-=y+height;
pero sigue igual...
En anteriores programas si lo conseguía pero parece que algún concepto se me ha olvidado.

[marlanga]

No está bien. Coge una libreta de hojas cuadriculadas, dibuja un eje de coordenadas, dibuja un punto muy gordo donde debería estar el centro, y luego dibuja tu objeto. Es decir, ejecuta tú el código sobre una libreta,
No uses setTransform si no sabes exactamente lo que hace.