JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>

</head>
<body>
<div id="game">
</div>
</body>
</html>

CSS

#color-picker-square-picker {
    position: absolute;
    background-image: url("https://warriorslife.site/circle.png");
}

#abc {
  position: absolute;
}

JavaScript

let canvas = document.createElement('canvas');
canvas.id = 'color-picker-square';
canvas.width = 100;
canvas.height = 100;
game.append(canvas);
let context = canvas.getContext('2d');
let gradient = context.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, "hsl(0, 0%, 0%)");
gradient.addColorStop(1, "hsl(0, 100%, 0%)");
context.fillStyle = gradient;
gradient = context.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, "hsl(0, 0%, 0%)");
gradient.addColorStop(1, "hsl(0, 0%, 100%)");
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
let picker = document.createElement('div');
picker.id = 'color-picker-square-picker';
//let picker = document.createElement('img');
//picker.src = 'https://warriorslife.site/circle.png';
//picker.id = 'abc';
canvas.append(picker);
canvas.onclick = function(event) {
	picker.style.left = event.clientX;
	picker.style.top = event.clientY;
};