JSFiddle - React, Tailwind, and code Playground

by painotpi

HTML

<img src='http://1.bp.blogspot.com/-SaHnF4huNdM/ULNGwjgMVvI/AAAAAAAADJk/uKmkDnYZpfc/s200/jerry+mouse.jpg' alt='' />

<div>
</div>

<section>
</section>

CSS

img{
    display: none;    
}

JavaScript

var down = false;
var img = $('img');

var canvas = document.createElement("canvas");
canvas.width = img.width();
canvas.height = img.height();
canvas.getContext('2d').drawImage(img[0], 0, 0);

$('section').append(canvas);

img
.mousedown(function(){
    down = true;
})
.mouseup(function(){
    down = false;
})
.mouseleave(function(){
    down = false;
})
.mousemove(function(e){
    if(down){
        var x = $('div').html();
        
        $('div').html(x + ' ' + e.clientX + ", " + e.clientY);
    }
});

img.on('dragstart', function(e){
    e.preventDefault();
    
    return false;
});

$('section').on('click', 'canvas', function(e){
    alert(canvas.getContext('2d').getImageData(e.clientX, e.clientY, 1, 1).data)
});