How to horizontally flip an image

user_6048882 0
Viewed 24229

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);
canvas html javascript
4 Answers
function mirrorImage(image, src_x, src_y, img_width, img_height, x, y){

   // 1. MIRROR THE CONTEXT
   context.scale(-1, 1);

   // 2. DRAW IN CANVAS USING (-X - img_width)
   context.drawImage(image, src_x, src_y, img_width, img_height, - 
   x - img_width, y, img_width, img_height);

   // 3. RETURN CONTEXT TO ORIGINAL STATE (AFTER DRAWING)
   context.scale(-1, 1);

}
user_185970920
Related