var surface;
var happy;
var angle = 5;

function drawCanvas(name, imageURL) {
    // Get our Canvas element
    surface = document.getElementById(name);

    if (surface.getContext) {
        // If Canvas is supported, load the image
        happy = new Image();
        happy.onload = loadingComplete;
        happy.src = imageURL;
    }
}

function loadingComplete(e) {
    // When the image has loaded begin the loop
    setInterval(loop, 25);
}

function loop() {
    // Each loop we rotate the image
    // Grab the context
    var surfaceContext = surface.getContext('2d');

        // Clear the canvas to White
    //surfaceContex.addColorStop(0, rgba(0,0,0,0));
	surfaceContext.globalAlpha = 0.5;
    
	surfaceContext.fillStyle = "rgba(255,255,255,0)";
	surfaceContext.fillRect(0, 0, surface.width, surface.height);

    // Save the current context
    surfaceContext.save();
    // Translate to the center point of our image
    surfaceContext.translate(happy.width * 0.5, happy.height * 0.5);
    // Perform the rotation
    surfaceContext.rotate(DegToRad(angle));
    // Translate back to the top left of our image
    surfaceContext.translate(-happy.width * 0.5, -happy.height * 0.5);
    // Finally we draw the image
    surfaceContext.drawImage(happy, 0, 0);
    // And restore the context ready for the next loop
    surfaceContext.restore();

    // Increment our rotation angle
    angle++;
}

function DegToRad(d) {
    // Converts degrees to radians
    return d * 0.0174532925199432957;
}