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:relative;
}
#wheel_canvas {
    border-radius:50%;
}
#img_canvas {
    position:absolute;
    border-radius:50%;
    cursor:pointer;
}

JavaScript

var wheel_canvas = document.getElementById('wheel_canvas'),
    wheel_context = wheel_canvas.getContext('2d'),
    img_canvas = document.getElementById('img_canvas'),
    img_context = img_canvas.getContext('2d'),
    
    LARGE_DIAMETER = wheel_canvas.width,
    LARGE_RADIUS = LARGE_DIAMETER / 2,
    wheelBorder = LARGE_DIAMETER / 8,
    SMALL_DIAMETER = LARGE_DIAMETER - wheelBorder * 2,
    SMALL_RADIUS = SMALL_DIAMETER / 2,
    cx = cy = LARGE_RADIUS;

img_canvas.style.top = img_canvas.style.left = wheelBorder + "px";
img_canvas.width = img_canvas.height = SMALL_DIAMETER;

test();

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

function fillWheelBorder(hex) {    
    wheel_context.rect(0, 0, LARGE_DIAMETER, LARGE_DIAMETER);
    wheel_context.fillStyle = '#FF0000';
    wheel_context.fill();
}

function fillInnerCanvas() {
    img_context.rect(0, 0, SMALL_DIAMETER, SMALL_DIAMETER);
    img_context.fillStyle = '#00FF00';
    img_context.fill();
}

/* Since so much code is repeated I put them into one (: */
function clickHandler(e, r) {
    var ex = e.pageX,
        ey = e.pageY,
        l = Math.sqrt(Math.pow(cx - ex, 2) + Math.pow(cy - ey, 2));
    
    if(l > r) { // If the distance is greater than the radius
        if(r === LARGE_RADIUS) { // Outside of the large
            // Do nothing
        } else { // The corner area you were having a problem with
            clickHandler(e, LARGE_RADIUS);
        }
    } else {
        if(r === LARGE_RADIUS) { // Inside the large cirle
            alert('Outer canvas clicked x:' + ex + ',y:' + ey);
        } else { // Inside the small circle
            alert('Inner canvas clicked x:' + ex + ',y:' + ey);
        }
    }
}

$(img_canvas).click(function(e) { clickHandler(e, SMALL_RADIUS); });

$(wheel_canvas).click(function(e) { clickHandler(e, LARGE_RADIUS); });