JSFiddle - React, Tailwind, and code Playground

by Zeaklous

HTML

<div id="clrpicker" class="popup1">
    <canvas id="wheel_canvas" title="Click here to choose this color opacity" height="320" width="320"></canvas>
    <div class="circle">
        <canvas id="img_canvas"></canvas>
    </div>
    <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%;
}
.circle {
    position:absolute;
    top:20px; left:20px;
    border-radius:50%;
    cursor:pointer;
    overflow:hidden;
}

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;
    img_context.fill();
}

$(document).ready(function (e) {
    $(img_canvas).click(function (e) {
        ex = e.pageX;
        ey = e.pageY;

        px =...