pointer events on an image

by eliranmal

HTML

<div id="log">Message...</div>
<div id="container">
    <!--<img id="image" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" width="484" height="484" />-->
    <!--<img id="image" src="http://placekitten.com/g/200/300" width="200" height="300" />-->
</div>
<canvas id="canvas"></canvas>

CSS

#container {
    pointer-events: auto;
}
#image {
    /* toggle value between 'none' and 'auto' to alter the click delegation */
    pointer-events: auto;
}


#image {
    border: 2px dashed #57f;
}
#container {
    background-color: #cdf;
}

#log {
    padding: .4em .6em;
    font: 11px consolas, courier-new, console;
    color: #aaa;
}

JavaScript

(function() {

    var containerEl = document.getElementById('container');
    // var imageEl = document.getElementById('image');
    var logEl = document.getElementById('log');

    var img = new Image();
    img.id = 'image';
    img.src = 'http://placekitten.com/g/200/300';
    var context = document.getElementById('canvas').getContext('2d');
    context.drawImage(img, 0, 0);
    
    // data = context.getImageData(x, y, 1, 1).data;    

    var clickLogHandler = function(e) {
        var d = context.getImageData(10, 10, 1, 1).data;
        console.log(d);
        logEl.innerText = this.tagName + ' clicked!';
    };
    
    containerEl.addEventListener('click', clickLogHandler, true);
    img.addEventListener('click', clickLogHandler, true);
    
})();