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\');
          


        

Answer 1

To mirror image you can use setTransform with negative scale.

context.setTransform(-1, 0, 0, 1, 0, 0);    //Now all images will be horizontally mirrored
context.drawImage(, srcx, srcy, srcw, srch, dstx, dsty, dstw, dsth);

Don't forget to restore transform when you finished.

context.setTransform(1, 0, 0, 1, 0, 0);