1

I need context.drawImage(...) begins drawing from right to left. It is possible to do this? Lets say I have player1 and player2 as in the pictures

player2 player2

The thing is both of them are same sprite, and each frame of that sprite has different width and height, which is not a problem when i draw player1(left align) because the variation of width can affect the rightmost part of the arm, but not the movement of the character. Now, when I draw player1 fliped(player2), the painting begins for the punching hand and that messes the character movement animation. So, what i want is drawing player2 beginning for the right side of the image instead the default method, or any viable solution. My sprite painter is this

that.paint=function(frameOriginX,frameOriginY,xPosition,yPosition,frameWidth,frameHeight,previousWidth,previousHeight,fliped){
      if(fliped==true){
    that.context.imageSmoothingEnabled = false; 
    that.context.save();
    that.context.translate(xPosition, yPosition + frameHeight);
    that.context.rotate(180*Math.PI/180);
    that.context.scale(1, -1);
    that.context.translate(-(xPosition + frameWidth), -(yPosition + frameHeight));
   }
   //floor var is global and is equal to 300
   var oldYCoord=floor-previousHeight;
   that.context.clearRect(xPosition,oldYCoord, previousWidth, previousHeight);       
       that.context.drawImage(
       that.image,
       frameOriginX,
       frameOriginY,
       frameWidth,
       frameHeight,
       xPosition,
       yPosition,
       frameWidth,
       frameHeight);
   if(fliped==true)
    that.context.restore();
}

For learning reasons I am using plain javascript for the job, no engines no librarys. Here is the game demo

  • http://stackoverflow.com/questions/8168217/html-canvas-how-to-draw-a-flipped-mirrored-image – tomasantunes Nov 10 '16 at 19:50
  • does not solve the problem really. With this indeed the sprite is fliped, but still drawing from the border of the arm to the back and i need the opposite. I updated the answer with a link to code, take a look if possible. –  Nov 10 '16 at 20:53

0 Answers0