JSFiddle - React, Tailwind, and code Playground

by mikeschultz

HTML

<canvas id='mycanvas'></canvas>
<canvas id='hitcanvas'></canvas>

CSS

html, body {
  margin : 0;
}
canvas {
  border: 1px solid black;
}

JavaScript

var myCanvas = document.getElementById('mycanvas');

var myCanvasCTX = myCanvas.getContext('2d');

var hitcanvasCTX = document.getElementById('hitcanvas').getContext('2d');

//Rectangle 1
myCanvasCTX.fillStyle ='rgba(0,0,0,0)';
myCanvasCTX.fillRect(10,10,100,100);
hitcanvasCTX.fillStyle='rgb(0,0,1)';
hitcanvasCTX.fillRect(10,10,100,100);

//Rectangle 2
myCanvasCTX.fillStyle ='rgba(0,0,0,0)';
myCanvasCTX.fillRect(50,50,100,100);
hitcanvasCTX.fillStyle='rgb(0,0,2)';
hitcanvasCTX.fillRect(50,50,100,100);

var pixelMap = {
	'001' : 'rectangle 1',
  '002' : 'rectangle 2'
};

myCanvas.addEventListener('click', function(event){
	getColor(event);
})


function getColor(event) {
	var imgData = hitcanvasCTX.getImageData(event.pageX, event.pageY, 1,1);
	var rgb = '' + imgData.data[0] + imgData.data[1] + imgData.data[2];
  alert(pixelMap[rgb]);
}