Rotated canvas sprite not drawing properly

Question

First, sorry for my english. Said that: Recently I began to study JavaScript and like a way to consolidate what I learned I decided to make a simple video game with canvas and javascript: kind of Mortal Kombat demo, without library or game engine, just what I had learned until the moment. The problem with my little project is that when and move it or throw a punch with player2 (which is basically player1 rotated) the sprite becomes a mess, even when the code is exactly the same that for player1. I guess is related with rotating the context, but I can't figure it out. Here is the code mortal kombat demo, along with basic instructions.

Answer 1

Looking at your code I found this

that.context.translate(xPosition + frameWidth, yPosition + frameHeight);
that.context.rotate(180 * Math.PI / 180);
that.context.scale(1, -1);
that.context.translate( - (xPosition + frameWidth),  - (yPosition + frameHeight));

Then you clear the previous rendering in the new coordinates system which i am guessing is resulting in bits of the previous sprite not being cleared

To fix I would rewrite the function as (sorry forgot you had where using the object that)

// Clear the old image out (you should just be clearing the whole canvas every frame 
// with a background so you dont need to do this.
var oldYCoord = floor - previousHeight;
this.context.clearRect(xPosition, oldYCoord, previousWidth, previousHeight);
// Saving context only because I do not know what the current state is
this.context.save();
// Set the top left or right corner of the image
if (fliped) {
    this.setTransform(-1,0,0,1,xPosition + frameWidth,yPosition); // flip x axis and 
                                                                  // set origin to top right of image
}else{
    this.setTransform(1,0,0,1,xPosition,yPosition); // set origin to top right of image
}
// draw the image at the new origins
this.context.drawImage(that.image, 
    frameOriginX, frameOriginY, frameWidth, frameHeight, 
    0,0, frameWidth, frameHeight  // @ 0,0
);
// restore
this.context.restore();
// if you don't do any other transforms elsewhere then remove the save and restore and add the following lineHeight
// this.context.setTransform(1,0,0,1,0,0); // restores default transform is quicker than save restore

I am guessing that will solve the problem.

BTW 180 * Math.PI / 180 when you multiply then divide by the same value they cancel each other out, 180/180 = 1 so the result is Math.PI

But you don't need to rotate just mirror along the x axis as is done in context.setTranform(-1,0,0,1,x,y) the first two values are the vector pointing in the direction of the x axis, the second two are the vector pointing along the y axis and the last two are the location of the origin. The values are always in canvas pixel coordinates when using setTransform, unlike translate,rotate,scale, and transform which are in the current transformed coordinate system