How to horizontally flip an image

Question

How can i draw only two images with reversing I don't know how to reverse. Pls help.

    var canvas = document.createElement('canvas');
    canvas.width = 16 * scale;
    canvas.height = 32 * scale;
    //we assign the same classname the image has, for CSS purposes
    canvas.setAttribute('class', skinImage.getAttribute('class'));
    canvas.setAttribute('title', skinImage.getAttribute('title'));
    var context = canvas.getContext("2d"),
    s = scale;
    context.imageSmoothingEnabled=!1,
    context.mozImageSmoothingEnabled=!1,
    context.oImageSmoothingEnabled=!1,
    CanvasRenderingContext2D.webkitImageSmoothingEnabled=!1,
    context.clearRect(0,0,canvas.width,canvas.height);

    //back draw the head
    context.drawImage(skinImage, 24,  8,  8, 8,  4*s,  0*s,  8*s, 8*s);
    //back draw the body
    context.drawImage(skinImage, 32, 20, 8, 12, 4*s,  8*s,  8*s, 12*s);
    //back draw the right leg
    context.drawImage(skinImage, 52, 20, 4, 12, 12*s, 8*s,  4*s, 12*s);
    //back draw the right arm
    context.drawImage(skinImage, 12, 20, 4, 12, 8*s,  20*s, 4*s, 12*s);

    //back draw the left arm
    context.drawImage(skinImage, 12, 20, 4, 12, 4*s,  20*s, 4*s, 12*s);
    context.drawImage(skinImage, 52, 20, 4, 12, 0*s,  8*s,  4*s, 12*s);

Answer 1

First, to remove your 2 unwanted image, just clear the canvas and redraw the desired images. You can clear the canvas using context.clearRect(0,0,canvas.width,canvas.height).

Flip image(s) horizontally

How to horizontally flip an image:

1. Move (translate) the canvas origin to your desired X-coordinate plus the image width: context.translate(x + img.width, y); Adding the img.width is necessary because we are grabbing the left edge of the image and flipping it leftward. Without adding img.width, the img would be drawn leftward of the desired x-coordinate.

2. Flip horizontally using context.scale(-1, 1);

3. Draw the image: context.drawImage(img, 0, 0);

4. Clean up by resetting transformations to their default values: context.setTransform(1, 0, 0, 1, 0, 0);

Annotated code and a Demo:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/sillouette2.png";
function start(){

    ctx.fillText('original',10,30);
    ctx.drawImage(img,10,30);

    ctx.fillText('flipped',150,30);
    flipHorizontally(img,150,30);

}

function flipHorizontally(img,x,y){
    // move to x + img's width
    ctx.translate(x+img.width,y);

    // scaleX by -1; this "trick" flips horizontally
    ctx.scale(-1,1);
    
    // draw the img
    // no need for x,y since we've already translated
    ctx.drawImage(img,0,0);
    
    // always clean up -- reset transformations to default
    ctx.setTransform(1,0,0,1,0,0);
}

#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>

[Addition: flipping a sprite from a spritesheet]

To flip a sprite that's contained in a spritesheet you can use the cropping form of drawImage. The cropping drawImage will crop the desired sprite from the spritesheet by specifiying the sprite's spriteX, spriteY, spriteWidth & spriteHeight. The same cropping drawImage will also draw the cropped sub-image onto the canvas by specifying the desire canvas canvasX, canvasY, spriteWidth & spriteHeight.

Here is code showing how to flip a sprite from a spritesheet

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/cars.jpg";
function start(){

  var spriteX=92;
  var spriteY=63;
  var spriteW=80;
  var spriteH=40;

  ctx.fillText('original',10,30);
  ctx.drawImage(img,spriteX,spriteY,spriteW,spriteH,10,30,spriteW,spriteH);

  ctx.fillText('flipped',150,30);
  flipSpriteHorizontally(img,150,30, spriteX,spriteY,spriteW,spriteH);

}

function flipSpriteHorizontally(img,x,y,spriteX,spriteY,spriteW,spriteH){
  // move to x + img's width
  // adding img.width is necessary because we're flipping from
  //     the right side of the img so after flipping it's still
  //     at [x,y]
  ctx.translate(x+spriteW,y);

  // scaleX by -1; this "trick" flips horizontally
  ctx.scale(-1,1);

  // draw the img
  // no need for x,y since we've already translated
  ctx.drawImage(img,
                spriteX,spriteY,spriteW,spriteH,0,0,spriteW,spriteH
               );

  // always clean up -- reset transformations to default
  ctx.setTransform(1,0,0,1,0,0);
}

#canvas{border:1px solid red; margin:0 auto; }

<h4>Drawing & horizontally flipping a sprite</h4>
<canvas id="canvas" width=300 height=100></canvas>
<h4>Spritesheet:</h4>
<img src='https://dl.dropboxusercontent.com/u/139992952/multple/cars.jpg'>