mouse events canvas

by Nick Hulea

HTML

<canvas id="theCanvas" width="500" height="400" style="border:1px solid black;"></canvas>

JavaScript

function main() {
    var greaterX, lessX, greaterY, lessY, offsetX, offsetY;
    var cvs = document.getElementById("theCanvas");
    var ctx = cvs.getContext("2d");
    var img = new Image();
    img.src = "http://w3schools.com/images/compatible_chrome.gif";
    var imgX = 75;
    var imgY = 75;

    function draw() {
        ctx.drawImage(img, imgX, imgY);
    }
    img.addEventListener('load',draw,false);
    cvs.addEventListener("mouseup", function(ev) {
        greaterX = false;
        lessX = false;
        greaterY = false;
        lessY = false;
        cvs.removeEventListener('mousemove',mouseMoveHandler,false);
    });
    cvs.addEventListener("mousedown", function(ev) {
        if (ev.clientX <= (imgX + 97)) {
            greaterX = true;
        }
        if (ev.clientY <= (imgY + 129)) {
            greaterY = true;
        }
        if (ev.clientX >= imgX) {
            lessX = true;
        }
        if (ev.clientY >= imgY) {
            lessY = true;
        }
        if (greaterX === true) {
            if (greaterY === true) {
                if (lessX === true) {
                    if (lessY === true) {
                        cvs.addEventListener("mousemove",mouseMoveHandler,false);
                    }
                }
            }
        }
    });
    function mouseMoveHandler(ev) {
        offsetX = (ev.clientX - imgX);
        offsetY = (ev.clientY - imgY);
        imgX = imgX + offsetX;
        imgY = imgY + offsetY;
        draw();
        console.log("mousemove triggered");
    }           
}
main();