JSFiddle - React, Tailwind, and code Playground

HTML

<div id="clrpicker" class="popup1">               
        <canvas id="wheel_canvas" title="Click here to choose this color opacity" height="320" width="320"></canvas>
        <canvas id="img_canvas">
        </canvas>
        <div id="picker_rotater">
            <div id="picker_div"></div>
            <!-- U might be unable to see following div in execution and it is not concern as well..
            I am just using its top left position to pick color at that pixel -->
            <div id="picker_xy"></div>
        </div>
        <input id='color_val_show' style="margin-left: 130px; width: 60px" />
    </div>

CSS

#clrpicker
	{
            z-index:4;
            width:320px;
            visibility:hidden;
            position:absolute;	
	}
	
	#wheel_canvas
	{
            border-radius:50%;
	}
	
	#picker_rotater
	{
            position: absolute;
            top: 150px;
            left: 0.5%;
            height: 20px;
            width: 99%;
            pointer-events: none;
	}
	
	#picker_div
	{
		width:12px;
		height:12px;
		background-color:#CCC;
		border:1px solid #000;
		border-radius:50%;
		margin-left:95%;
		cursor:move;	
		z-index:8;
	}
	
	#image_rotater
	{
		position: absolute;
		top: 154px;
		left: 10%;
		height: 14px;
		width: 80%;
		pointer-events: none;
	}
	
	#image_picker
	{
		width:12px;
		height:12px;
		background-color:#CCC;
		border:1px solid #000;
		border-radius:50%;
		margin-left:95%;
		cursor:move;	
		z-index:8;
	}
	
	#image_xy
	{
		height:1px;
		width:1px;
		background:#030;
		position:absolute;
		top:43%;
		left:99%;
	}
	
	#picker_xy
	{
		height:1px;
		width:1px;
		background:#030;
		position:absolute;
		top:43%;
		left:100%;
	}
        
	#img_canvas
	{
		position:absolute;
		border-radius:50%;
                -webkit-border-radius: 100%;
		overflow:hidden;
		cursor:pointer;
	}

JavaScript

var wheel_canvas = document.getElementById('wheel_canvas');
       
        var wheel_context = null;
        var LARGE_RADIUS = wheel_canvas.width;
        var wheelBorder = LARGE_RADIUS/8;
	var SMALL_RADIUS = LARGE_RADIUS - wheelBorder;
        var centerX = LARGE_RADIUS/2, centerY = LARGE_RADIUS/2;
        
        var img_canvas = document.getElementById('img_canvas');
        img_canvas.width = SMALL_RADIUS;
        img_canvas.height = SMALL_RADIUS;
        img_context = img_canvas.getContext('2d');
        
	var wheel_grd = null;
	test('#123456');
        
        centerX += $('#clrpicker').offset().left;
        centerY += $('#clrpicker').offset().top;
        
        $('#img_canvas').css({'left':wheelBorder/2+'px','top':wheelBorder/2+'px'});

	function test(hex)
	{
            inverted = hex;//hexBW(hex);
            $('#color_val_show').val(hex);
            current_color_hex_val_selected = hex;		

            $('#clrpicker').css({'left':60,'top':$(window).scrollTop()+60});
            $('#picker_div').css({'top':LARGE_RADIUS/2,'left':0});
            $('#clrpicker').css('visibility','visible');
			
	    
            fillInnerCanavas();
            fillWheelBorder(hex);
	}

	function fillWheelBorder(hex)
	{
        wheel_context = wheel_canvas.getContext('2d');
	    wheel_context.rect(0, 0, LARGE_RADIUS, LARGE_RADIUS);
	    wheel_grd = wheel_context.createLinearGradient(1,1,1,LARGE_RADIUS-2);
	    wheel_grd.addColorStop(1, '#ffffff');
	    wheel_grd.addColorStop(0.5, hex);
	    wheel_grd.addColorStop(0, '#000000');
	    wheel_context.fillStyle = wheel_grd;
	    wheel_context.fill();
	}
        
        function fillInnerCanavas()
        {
            img_context.rect(0, 0, SMALL_RADIUS, SMALL_RADIUS);
	    wheel_grd = img_context.createLinearGradient(1,1,1,SMALL_RADIUS-2);
	    wheel_grd.addColorStop(1, '#ff0000');
	    wheel_grd.addColorStop(0.5, '#00ff00');
	    wheel_grd.addColorStop(0, '#0000ff');
	    img_context.fillStyle = wheel_grd;
	   ...