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'>

Answer 2

Mirror an image

Here is a simple utility function that will mirror an image horizontally, vertically or both.

// arguments
// ctx : the context on which to draw the mirrored image
// image : the image to mirror
// x,y : the top left of the rendered image
// horizontal : boolean if true mirror along X
// vertical : boolean if true mirror along y
function mirrorImage(ctx, image, x = 0, y = 0, horizontal = false, vertical = false){
    ctx.save();  // save the current canvas state
    ctx.setTransform(
        horizontal ? -1 : 1, 0, // set the direction of x axis
        0, vertical ? -1 : 1,   // set the direction of y axis
        x + horizontal ? image.width : 0, // set the x origin
        y + vertical ? image.height : 0   // set the y origin
    );
    ctx.drawImage(image,0,0);
    ctx.restore(); // restore the state as it was when this function was called
}

Usage

mirrorImage(ctx, image, 0, 0, true, false); // horizontal mirror
mirrorImage(ctx, image, 0, 0, false, true); // vertical mirror
mirrorImage(ctx, image, 0, 0, true, true);  // horizontal and vertical mirror

More mirrors

If you wish to be able to mirror along an arbitrary line see the answer Mirror along line