Question: This works vertically but I am trying to rotate horizontally by clicking on the image. Can not figure this out! Or there might be an easier way of doing this as well.

```
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flip Image</title>
        <style>
            canvas{border:1px solid #333}
            img{display:none;}
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">      </script>
        <script type="text/javascript">
            $(window).load(function(){

                var immagine = $('img')[0]
                alt=immagine.height
                lar=immagine.width
                $('<canvas width="'+lar+'" height="'+alt+'"></canvas>').appendTo('body')
                var ca=$('canvas').get(0)
                ctx=ca.getContext('2d')
                ctx.drawImage(immagine, 0, 0);

                $('canvas').click(function(){
                    ctx.translate(lar-1, alt-1);
                    ctx.rotate(Math.PI);
                    ctx.drawImage(immagine, 0, 0, lar, alt);
                 })

            })
        </script>
    </head>
    <body>
        <!-- onclick rotate image horizontally-->
        <img src="myimage.jpg">

        <br><Br>

    </body>
</html>

```

Thanks!

Answer: 
You can rotate image to any angle by just a simple mathematical logic. For example if you want to rotate image to 90 degree. Just use:

```
ctx.rotate(90 * Math.PI/180);

```

*You can set your desired angle in above code and rotate image.*

**UPDATE**
I am adding some code according to your needs. that works on canvas click and this will rotate image in one direction. 

```
var angleInDegrees=0;

$('canvas').click(function(){
   angleInDegrees+=90;
    drawRotated(angleInDegrees);
 })
function drawRotated(degrees){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(canvas.width/2,canvas.height/2);
    ctx.rotate(degrees*Math.PI/180);
    ctx.drawImage(image,-image.width/2,-image.width/2);
    ctx.restore();
}

```
I agree to Rajesh's comment, you can set your angle and that will rotate according to the translation performed prior to that. I'd prefer using webkit over canvas sometimes. Here is a fiddle that does the rotation horizontally using CSS webkit, it's much simpler in my opinion. 
[Horizontal Rotation Using Webkit](http://jsfiddle.net/8SV8T/)

```
.rotate  img{
-webkit-transform: rotateY(180deg);   
-webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;
z-index: -2; }

```