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.


1 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
// 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
    this.setTransform(1,0,0,1,xPosition,yPosition); // set origin to top right of image
// draw the image at the new origins
    frameOriginX, frameOriginY, frameWidth, frameHeight, 
    0,0, frameWidth, frameHeight  // @ 0,0
// 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

  • \$\begingroup\$ Wow, Thanks for the advices blindsman, were really usefull; what takes me to ask you about a full tutorial or book or bibiliography in general about the transformation matrix if you know. \$\endgroup\$
    – Krlos9108
    Commented Nov 13, 2016 at 20:42
  • \$\begingroup\$ @Krlos9108 unfortunately I do not know of any good learning resource for the transformation matrix. \$\endgroup\$
    – Blindman67
    Commented Nov 14, 2016 at 5:58

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .