JSFiddle - React, Tailwind, and code Playground

by rudigerkidd

HTML

<canvas id="myCanvas" width="578" height="200"></canvas>

JavaScript

var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

	
     var button = new Object();
		button.x = 50;
		button.y = 50;
		button.width = 50;
		button.height = 50;
		button.rgb = "rgb(0, 0, 255)";
		function drawbutton(buttonobject)
		{
			context.fillStyle = buttonobject.rgb;
			context.fillRect (buttonobject.x, buttonobject.y, buttonobject.width, buttonobject.height);
			context.strokeRect(buttonobject.x, buttonobject.y, buttonobject.width, buttonobject.height);
		}
		drawbutton(button);
		
		
		function checkIfInsideButtonCoordinates(buttonObj, mouseX, mouseY)
		{
			if(((mouseX > buttonObj.x) && (mouseX < (buttonObj.x + buttonObj.width))) && ((mouseY > buttonObj.y) && (mouseY < (buttonObj.y + buttonObj.height))))
				return true;
			else
				return false;
		}
		
		$("#myCanvas").click(function(eventObject) {
			mouseX = eventObject.pageX - this.offsetLeft;
			mouseY = eventObject.pageY - this.offsetTop;
		 
			if(checkIfInsideButtonCoordinates(button, mouseX, mouseY))
			{
				button.rgb = "rgb(0, 255, 0)";
				drawbutton(button);
			} else {
				button.rgb = "rgb(255, 0, 0)";
				drawbutton(button);
			}
		});