JSFiddle - React, Tailwind, and code Playground

HTML

<div>
   	<canvas id="canvas" width ="640px" height ="480px"></canvas>
	</div>
  <button on_click="change_color();">
  Change Color
  </button>

JavaScript

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

function circle() {
	var centerX = 0;
  var centerY = 0;
  var radius = 78;
  context.clearRect(0, 0, window.innerWidth,window.innerHeight);
    
  context.fillStyle = 'rgba(0,0,0,0.5)';
	context.fillRect(0,0,window.innerWidth,window.innerHeight);
	
  context.translate(canvas.width / 2, canvas.height / 2);
	
	context.scale(1.5, 2);
	
	// define the arc path
	context.beginPath();
	context.arc(centerX, centerY, radius, 0, 5 * Math.PI, false);

	// stroke it
	context.lineWidth = 5;
	context.stroke();

	// make alpha solid (the color doesn't matter)
	context.fillStyle = 'rgba(0,0,0,1)';

	// change composite mode and fill
	context.globalCompositeOperation = 'destination-out';
	context.fill();

	// reset composite mode to default
	context.globalCompositeOperation = 'source-over';
}

function change_color() {
  context.fillStyle = 'rgba(0,255,0,1)';
  context.fill();
}

circle()