JSFiddle - React, Tailwind, and code Playground

HTML

<div id="clrpicker">               
        <canvas id="wheel_canvas" title="Click here to choose this
        color opacity" height="320" width="320"></canvas>
        <canvas id="img_canvas">
        </canvas>
    </div>

CSS

#clrpicker
	{
		position:absolute;/* necessary because using a child 
		with absolute position which will be positioned accrding
		to this container*/
	}
	#wheel_canvas
	{
		border-radius:50%;		
	}
	    
	#img_canvas
	{
		position:absolute;
		border-radius:50%;
        -webkit-border-radius: 100%;
		overflow:hidden;
		cursor:pointer;
    left:20px;
    top:20px;
	}

JavaScript

var wheel_canvas = document.getElementById('wheel_canvas');
        var wheel_context = wheel_canvas.getContext('2d');

        var LARGE_RADIUS = wheel_canvas.width;
        var wheelBorder = LARGE_RADIUS/8;
		var SMALL_RADIUS = LARGE_RADIUS - wheelBorder;
        
        var img_canvas = document.getElementById('img_canvas');
        img_canvas.width = SMALL_RADIUS;
        img_canvas.height = SMALL_RADIUS;
        img_context = img_canvas.getContext('2d');

        test();
        

	function test()
	{
        fillWheelBorder();
        fillInnerCanavas();
	}

	function fillWheelBorder(hex)
	{
        
	    wheel_context.rect(0, 0, LARGE_RADIUS, LARGE_RADIUS);
        wheel_context.fillStyle='#FF0000';
	    wheel_context.fill();
	}
        
        function fillInnerCanavas()
        {
            img_context.rect(0, 0, SMALL_RADIUS, SMALL_RADIUS);
			img_context.fillStyle = '#00FF00';
			img_context.fill();
        }

		$(img_canvas).click(function(e)
		{
            ex = e.pageX;
            ey = e.pageY;
            
            px = this.offsetLeft;
			py = this.offsetTop;
			ppx = this.parentNode.offsetLeft;
			ppy = this.parentNode.offsetTop;
            
			x = ex - px - ppx;
			y = ey - py - ppy;
            alert('Inner canvas clicked x:'+x+',y:'+y);
		});
        
        $(wheel_canvas).click(function(e)
		{
            ex = e.pageX;
            ey = e.pageY;
            
            px = this.offsetLeft;
			py = this.offsetTop;
			ppx = this.parentNode.offsetLeft;
			ppy = this.parentNode.offsetTop;
			x = ex - px - ppx;
			y = ey - py - ppy;
            alert('Outer canvas clicked x:'+x+',y:'+y);
		});