JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<canvas id="canvas" width="400px" height="400px"></canvas>

CSS

body {
            background: #3e3e3e;
        }
        #canvas {
            background:white;
            border: 2px solid yellow;
        }

JavaScript

var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        var offsetX = canvas.offsetLeft;
        var offsetY = canvas.offsetTop;

        var cx = canvas.width / 2;
        var cy = canvas.height / 2;
        var r = 20;

        ctx.beginPath();
        ctx.arc(cx, cy, r, 0, 2 * Math.PI, false);
        ctx.closePath();
        ctx.stroke();

        function handleEvent(e) {

            var evt = e ? e : window.event;
            clickX = evt.clientX - offsetX;
            clickY = evt.clientY - offsetY;

            var dx = cx - clickX;
            var dy = cy - clickY;

            if (dx * dx + dy * dy <= r * r) {
                alert("you are inside the circle");
            }

            return false;
        }

        canvas.addEventListener("click", handleEvent);