JSFiddle - React, Tailwind, and code Playground

by MegaScience

HTML

<canvas id="canvas" width="500" height="100">
  Canvas not supportet!
</canvas>

JavaScript

var BigCircle = function(ctx, x, y, color, circleSize) {
  ctx.beginPath();
  ctx.arc(x, y, circleSize, 0, Math.PI * 2, true);
  ctx.fillStyle = color
  ctx.fill();
  ctx.closePath();
  this.clicked = function() {
    ctx.fillStyle = '#ff0000';
    ctx.fill();
  }
};

var width = 65,
		height = 50,
    diameter = 25;

function init() {
  var canvas = document.getElementsByTagName("canvas")[0],
    ctx = canvas.getContext('2d'),
  	bigGreen = new BigCircle(ctx, width, height, '#5eb62b', diameter);
  canvas.addEventListener('click', function(e) {
    var x = e.clientX,
      y = e.clientY;
    if (Math.pow(x - width, 2) + Math.pow(y - height, 2) < Math.pow(diameter, 2))
      bigGreen.clicked()
  })
}

init();