http://stackoverflow.com/questions/10215408/toggle-image-in-canvas

canvas flip game

HTML

<script src="js/jquery-1.11.1.js"></script>
<canvas id="canvas" width="165px" height="145px"></canvas>

CSS

#canvas {
    background-color:red;
}

JavaScript

var myButton = new Image();
var mouseX = 0;
var mouseY = 0;
var backgroundImage = new Image();
var nothing = "http://dummyimage.com/100x100/000/fff&text=nothing";
var something = "http://dummyimage.com/100x100/000/fff&text=somthing";

function drawButton(buttonObj) {
    canvasContext.drawImage(buttonObj, buttonObj.x, buttonObj.y);
}

function checkIfInsideButtonCoordinates(buttonObj, mouseX, mouseY) {
    if (((mouseX > buttonObj.x) && (mouseX < (buttonObj.x + buttonObj.width))) && ((mouseY > buttonObj.y) && (mouseY < (buttonObj.y + buttonObj.height)))) {
        return true;
    } else {
        return false;
    }
}

$(function () {
    var canvas = $("#canvas").get(0);
    canvasContext = canvas.getContext('2d');
    backgroundImage.src = "http://dummyimage.com/100x100/000/fff&text=back";

    $(backgroundImage).load(function () {
        canvasContext.drawImage(backgroundImage, 0, 0);
        myButton.x = 100;
        myButton.y = 100;
        myButton.width = 100;
        myButton.height = 100;
        myButton.src = something;
        drawButton(myButton);
    });

    $("#canvas").click(function (eventObject) {
        debugger;
        mouseX = eventObject.pageX - this.offsetLeft;
        mouseY = eventObject.pageY - this.offsetTop;

        if (checkIfInsideButtonCoordinates(myButton, mouseX, mouseY)) {
            if (myButton.src == something) {
                myButton.src = nothing;
            } else if (myButton.src == nothing) {
                myButton.src = something;
            }

            drawButton(myButton);
        }
    });
});