JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

CSS

#container{
				width: 500px;
				height: 500px;
				background: #ddd;
};

JavaScript

var c = document.createElement('canvas');
	c.id = 'myCanvas';
	c.style.background = "#ffffff";
	c.width = "100";
	c.height = "50";
	document.getElementById('container').appendChild(c);
	
	var ctx = c.getContext("2d");
	ctx.beginPath();
	ctx.moveTo(0, 0);
	ctx.lineTo(0, 80);
	ctx.lineTo(50, 80);
	ctx.lineTo(50, 0);
	ctx.lineTo(0, 0);	
	ctx.strokeStyle = "red";
	ctx.stroke();

	var getColor2 = 0;
	var getColor = 0;

	c.addEventListener("click", function(){
		   if(getColor2 == 0){
			  ctx.fillStyle = "#ffffff";
		   }
		   if(getColor2 == 1){
			  ctx.fillStyle = "#ff33df";
		   }
		   if(getColor2 == 2){
			  ctx.fillStyle = "#bbbbbb";
		   }
		   if(getColor2 == 3){
			  ctx.fillStyle = "#bb4563";
		   }
		   if(getColor2 == 4){
			  ctx.fillStyle = "#234556";
			  getColor2 = -1; 
		   }
		   
		   getColor2++;
		   ctx.fill();

	});