I just want to rotate and move the image!! (Javascript, <canvas>, html 5)

Question

http://gist.github.com/232194

I know it's something wrong with my transformations in drawGuy. Can anyone help me figure out how to rotate just the image? Currently it rotates fine, but I something with the transforms is distorting it, so that it doesn't follow the mouse correctly.

Answer 1

Instead of translating forward and then translating backward again, simply push your current state onto the stack before you traslate/rotate, and when you're done - pop your state back off the stack. This is how most graphical applications make use of translations/rotations.

Also, you're translating by x, y, then additionally calling ctx.drawImage(guy, x, y). This is going to, in effect, double the offset. I'd either get rid of the translate call, or change the position arguments for the drawImage call to 0, 0.

function drawGuy() {
    ctx.save();                                                                                                                        
    ctx.translate(x,y);     
    ctx.rotate(angle * Math.PI / 180);                                                                               
    ctx.drawImage(guy, 0, 0); 
    ctx.restore();                                            
}

Check out the spec about context.save() and context.restore() (the way canvas does state push/pop), here.