JSFiddle - React, Tailwind, and code Playground

by Imran Bughio

HTML

<canvas id="myCanvas" width="600" height="600" />

CSS

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

JavaScript

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 xY = getCursorPosition(elem, event);
    var x = xY.x,
        y = xY.y;
    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) {
            alert('clicked an element');
        }
    });

}, false);

function getCursorPosition(canvas, event) {
    var rect = canvas.getBoundingClientRect();
    var x = event.clientX - rect.left;
    var y = event.clientY - rect.top;
		
		return {x: x, y: y};
}

// Add element.
elements.push({
    width: 150,
    height: 100,
    top: 0,
    left: 0
});

elements.push({
    width: 150,
    height: 50,
    top: 0,
    left: 0
});

// Render elements.
i = 1;
elements.forEach(function(element) {
		context.save();
		context.translate(50, 50);		
    element.left += 50; element.top += 50;
    newAng = degToRad(i*15);
		context.rotate(newAng);
		context.moveTo(0, 0);
		context.lineTo(200, 0);
		context.stroke();
    context.translate(200, 0);
    var curRotCor = rotCor(newAng, 200); // Magic get the x,y cor after rotate.
    element.left += curRotCor.x; element.top += curRotCor.y;
    context.rotate(-newAng);
    context.fillRect(0, -element.height/2, element.width, element.height);
    element.top -= element.height/2; // Move half up.
		context.restore();
    
    // Now I can make strokes with out transform at the same place:
		context.save();
    context.fillStyle = "transparent";
		context.strokeStyle = "#f00";
		context.lineWidth = 2;
    context.strokeRect(element.left, element.top, element.width, element.height);
    context.restore();
    
    i += 2;
});

function rotCor(angle, length){
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);
    
...