Spin image onclick Javascript
<p>Like the title says, I am trying to rotate an image once a user clicks a button. I am new to javasript so I am still trying to figure out how things work. I have found a good example but the two images they have are always spinning. I want my image to just spin once for 45 degrees.</p>

<p>I want the image to spin like the ones here:  <a href="http://jsfiddle.net/Pvtzv/276/" rel="nofollow">http://jsfiddle.net/Pvtzv/276/</a> but not everytime just once</p>

<p>Here is what I have so far:</p>

<pre><code>   function doSpin()
{

    wheel = new Image();
    //wheel.onload = initialDraw; // Once the image is loaded from file this function is called to draw the image in its starting position.
    wheel.src = "./female_avatar.gif";
        var surfaceContext = surface.getContext('2d');
surfaceContext.drawImage(wheel, 0, 0);

p += .02;

var r = 100;
var xcenter = 150;
var ycenter = 150;


var newLeft = Math.floor(xcenter + (r* Math.cos(p)));
var newTop = Math.floor(ycenter + (r * Math.sin(p)));
var newLeft1 = Math.floor(xcenter + -(r* Math.cos(p)));
var newTop1 = Math.floor(ycenter + -(r * Math.sin(p)));

     wheel.animate({
        top: newTop,
        left: newLeft,
    }, 2, function() {
        doSpin()
            });

       }
</code></pre>

<p>In my html</p>

<pre><code>    &lt;button onclick="doSpin()"&gt;spin image&lt;/button&gt;
</code></pre>
