JSFiddle - React, Tailwind, and code Playground

by mukkaram waheed

CSS

canvas {
    border: 5px solid black;
}

JavaScript

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

ctx.font = "30px monospace";
ctx.fillStyle = "black";
ctx.strokeText("click to begin", 140, 260);

canvas.addEventListener('click', function (evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse Clicked at ' + mousePos.x + ',' + mousePos.y;
    console.log(message);
}, false);

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