$(document.body).on('keydown', function(e) { 
    switch (e.which) { 
        // key code for left arrow 
        case 37: 
            console.log('left arrow key pressed!'); 
            break; 
        
        // key code for right arrow 
        case 39: 
            console.log('right arrow key pressed!'); 
            break; 
    } 
 });

var canvas = $('#my_canvas'); 

// calculate position of the canvas DOM element on the page

var canvasPosition = {
x: canvas.offset().left,
y: canvas.offset().top
};

canvas.on('click', function(e) {

// use pageX and pageY to get the mouse position
// relative to the browser window

var mouse = {
x: e.pageX - canvasPosition.x,
y: e.pageY - canvasPosition.y
}

// now you have local coordinates,
// which consider a (0,0) origin at the
// top-left of canvas element
});

 canvas.on('click', function(e) { 
    e.preventDefault(); 
    
    var mouse = { 
        x: e.pageX - canvasPosition.x, 
        y: e.pageY - canvasPosition.y 
    } 
    
    //do something with mouse position here 
    
    return false; 
 });

image, canvas { 
    user-select: none; 
    -ms-user-select: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -webkit-touch-callout: none; 
    -webkit-user-drag: none; 
 }

var canvasElement = document.getElementById('my_canvas'); 

// do nothing in the event handler except canceling the event
canvasElement.ondragstart = function(e) {
if (e && e.preventDefault) { e.preventDefault(); }
if (e && e.stopPropagation) { e.stopPropagation(); }
return false;
}

// do nothing in the event handler except canceling the event
canvasElement.onselectstart = function(e) {
if (e && e.preventDefault) { e.preventDefault(); }
if (e && e.stopPropagation) { e.stopPropagation(); }
return false;
}

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />

document.body.ontouchstart = function(e) { 
    if (e && e.preventDefault) { e.preventDefault(); } 
    if (e && e.stopPropagation) { e.stopPropagation(); } 
    return false; 
 } 

document.body.ontouchmove = function(e) {
if (e && e.preventDefault) { e.preventDefault(); }
if (e && e.stopPropagation) { e.stopPropagation(); }
return false;
}

// initialize an array of game objects 
 // at various positions on the screen using 
 // new gameObject(x, y, width, height)

var gameObjectArray = [
new gameObject(0, 0, 200, 200),
new gameObject(50, 50, 200, 200),
new gameObject(500, 50, 100, 100)
];

canvas.on('click', function(e) {
var mouse = {
x: e.pageX - canvasPosition.x,
y: e.pageY - canvasPosition.y
}

// iterate through all game objects
// and call the onclick handler of each

for (var i=0; i < gameObjectArray.length; i++) {
gameObjectArray[i].handleClick(mouse);
}
});

function gameObject(x, y, width, height) { 
    this.x = x; 
    this.y = y; 
    this.width = width; 
    this.height = height; 
    
    // mouse parameter holds the mouse coordinates 
    this.handleClick = function(mouse) { 
        
        // perform hit test between bounding box 
        // and mouse coordinates 

if (this.x < mouse.x &&
this.x + this.width > mouse.x &&
this.y < mouse.y &&
this.y + this.height > mouse.y) {

// hit test succeeded, handle the click event!
return true;
}

// hit test did not succeed
return false;
}
}

canvas.on('click', function(e) { 
    var mouse= { 
        x: e.pageX - canvasPosition.x, 
        y: e.pageY - canvasPosition.y 
    } 
         
    //fire off synthetic event containing mouse coordinate info 
    $(canvas).trigger('handleClick', [mouse]); 
 });

function gameObject(x, y, width, height) { 
    var self = this; 
    this.x = x; 
    this.y = y; 
    this.width = width; 
    this.height = height; 
    
    $(canvas).on('handleClick', function(e, mouse) { 

// perform hit test between bounding box
// and mouse coordinates

if (self.x < mouse.x &&
self.x + self.width > mouse.x &&
self.y < mouse.y &&
self.y + self.height > mouse.y) {

// hit test succeeded, handle the click event!

}
});
}

function gameObject(x, y, zIndex, width, height) { 
    var self = this; 
    this.x = x; 
    this.y = y; 
    this.zIndex = zIndex; 
    this.width = width; 
    this.height = height; 

//...
}

// sort in order such that highest z-index occurs first 
 var sortedGameObjectArray = gameObjectArray.sort(function(gameObject1, gameObject2) { 
    if (gameObject1.zIndex < gameObject2.zIndex) return true; 
    else return false;        
 })

canvas.on('click', function(e) { 
    var mouse = { 
        x: e.pageX - canvasPosition.x, 
        y: e.pageY - canvasPosition.y 
    } 
               
    for (var i=0; i < sortedGameObjectArray.length; i++) { 
        var hitTest = sortedGameObjectArray[i].onclick(mouse); 
        
        // stop as soon as one hit test succeeds 
        if (hitTest) { 
            break; // break out of the hit test 
        } 
    } 
 });

$(canvas).on('handleClick', function(e, mouse) { 

// first, define polygonal bounding area as a path
context.save();
context.beginPath();
context.moveTo(0,0);
context.lineTo(0,100);
context.lineTo(100,100);
context.closePath();

// do not actually fill() or stroke() the path because
// the path only exists for purposes of hit testing
// context.fill();

// perform hit test between irregular bounding area
// and mouse coordinates
if (context.isPointInPath(mouse.x, mouse.y)) {
// hit test succeeded, handle the click event!

}
context.restore();
});

function getPosition(e) { 
    var position = {x: null, y: null}; 
    
    if (Modernizr.touch) { //global variable detecting touch support 
        if (e.touches && e.touches.length > 0) { 
            position.x = e.touches[0].pageX - canvasPosition.x; 
            position.y = e.touches[0].pageY - canvasPosition.y; 
        } 
    } 
    else { 
        position.x = e.pageX - canvasPosition.x; 
        position.y = e.pageY - canvasPosition.y; 
    } 
    
    return position; 
 }

var eventName = Modernizr.touch ? 'touchstart' : 'click'; 

canvas.on(eventName, function(e) {
e.preventDefault();

var position = getPosition(e);
//do something with position here

return false;
});