JSFiddle - React, Tailwind, and code Playground

by Rahsheen Porter

HTML

<canvas id="myCanvas" width="200" height="200" />http://jsfiddle.net/rahsheen/jnep4tf1/4/#save

CSS

canvas {
    border: 3px solid #ccc;
    margin: 30px;
}

JavaScript

var elem = document.getElementById('myCanvas'),
    elemLeft = elem.offsetLeft,
    elemTop = elem.offsetTop,
    context = elem.getContext('2d'),
    elements = [];

// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft,
        y = event.pageY - elemTop;
    console.log(x, y);
    elements.forEach(function(element) {
        if (y > element.top && y < element.top + element.height && x > element.left && x < element.left + element.width) {
        switch(element.left) {
        case 20: alert('clicked the first element');
        break;
        case 40: alert('clicked the second element');
        break;
        case 60: alert('clicked the third element');
        break;
        default:
        alert('No idea what you clicked')
        }            
        }
    });

}, false);

// Add element.
elements.push({
    colour: '#05EFFF',
    width: 20,
    height: 20,
    top: 20,
    left: 20
});

// Add element.
elements.push({
    colour: 'red',
    width: 20,
    height: 20,
    top: 20,
    left: 40
});

// Add element.
elements.push({
    colour: 'blue',
    width: 20,
    height: 20,
    top: 20,
    left: 60
});
// Render elements.
elements.forEach(function(element) {
    context.fillStyle = element.colour;
    context.fillRect(element.left, element.top, element.width, element.height);
});