JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="zone" width="500" height="300"></canvas>

JavaScript

// JavaScript Document

var canvas = document.getElementById('zone');

if(!canvas.getContext){
	alert("canvas not supported");
}
else {
	var canvasContent = canvas.getContext('2d');
	var zoneX = canvas.width / 2;
	var zoneY = canvas.height / 2;
	var radius = 100;
	
	canvasContent.beginPath();
	canvasContent.arc(zoneX,zoneY, radius, 0, 2 * Math.PI, false);
	canvasContent.fillStyle = 'white';
	canvasContent.fill();
	canvasContent.lineWidth = 1;
	canvasContent.strokeStyle = '#333';
	canvasContent.stroke();	
	drawLine(canvasContent);
	$('#zone').on('click',function(e){
		var clickX = e.clientX;
		var clickY = e.clientY;
		alert(clickX + " : "+clickY);
	});
}

function drawLine(canvasContentDrawLine) {
	canvasContentDrawLine.beginPath();
	canvasContentDrawLine.moveTo(canvas.width / 2, canvas.width / 2);
	canvasContentDrawLine.lineTo(canvas.width / 2.5, canvas.height / 4.7);
	canvasContentDrawLine.moveTo(338, 200 );
	canvasContentDrawLine.lineTo(canvas.width / 2.5, canvas.height / 4.7);
	canvasContentDrawLine.stroke();
}