JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<canvas width="600" height="200"></canvas>
<div id="colorInfo">
<aside class="colorInfo">
R: <output name="red">-</output>
H: <output name="hue">-</output><br>
G: <output name="green">-</output>
S: <output name="sat">-</output><br>
B: <output name="blue">-</output>
L: <output name="light">-</output><br>
A: <output name="alpha">-</output>
</aside>
<aside class="colorInfo">
</aside>
<aside class="colorInfo">
</aside>
</div>

CSS

canvas {
  width: 600px; height: 200px;
  outline: 5px solid black;
  
}
output {
  display: inline-block;
  width: 3em;
  background-color: #ffc;
}
#colorInfo {
  display: flex;
}
#colorInfo aside {
  flex: 0 0 200px;
  padding: 1em 1em;
  box-sizing: border-box;
  border: 1px solid black;
}

JavaScript

const infos = document.querySelectorAll("#colorInfo aside");
infos[1].innerHTML = infos[0].innerHTML;
infos[2].innerHTML = infos[0].innerHTML;
const can = document.querySelector("canvas");
const ctx = can.getContext("2d");

const cg = ctx.createConicGradient(0, 100, 100);
cg.addColorStop(0/6, "#ff0000");
cg.addColorStop(1/6, "#ffff00");
cg.addColorStop(2/6, "#00ff00");
cg.addColorStop(3/6, "#00ffff");
cg.addColorStop(4/6, "#0000ff");
cg.addColorStop(5/6, "#ff00ff");
cg.addColorStop(6/6, "#ff0000");

const rg = ctx.createRadialGradient(100, 100, 0, 100, 100, 100);
rg.addColorStop(0.0, "#ffffff");
rg.addColorStop(0.2, "#ffffff");  // 20px ist 0.2
rg.addColorStop(1.0, "#ff0000");

ctx.resetTransform();
ctx.fillStyle = cg;
ctx.fillRect(0, 0, 200, 200);
ctx.beginPath();
ctx.fillStyle="#808080";
ctx.arc(100, 100, 20, 0, 360);
ctx.fill();

ctx.translate(200, 0);
ctx.fillStyle = cg;
ctx.fillRect(0, 0, 200, 200);
ctx.beginPath();
ctx.fillStyle="#808080";
ctx.arc(100, 100, 20, 0, 360);
ctx.fill();

ctx.globalCompositeOperation = "saturation";
ctx.fillStyle = rg;
ctx.fillRect(0, 0, 200, 200);

ctx.translate(200,0);
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = rg;
ctx.fillRect(0, 0, 200, 200);

const image = ctx.getImageData(0, 0, 600, 200);
console.log(`got image of ${image.width}x${image.height} in ${image.colorSpace}, with ${image.data.length} bytes of data`)

can.addEventListener("mousemove", function(event) {
   const y = Math.min(event.offsetY, image.height-1);
   const x = event.offsetX % image.height;
   console.log(event.offsetX, event.offsetY, x, y, image.width, image.height);
   
   const offs0 = y * image.width + x,
         offs1 = offs0 + image.height,
         offs2 = offs1 + image.height;
   
   setData(infos[0], 4*offs0);
   setData(infos[1], 4*offs1);
   setData(infos[2], 4*offs2);
   
   function setData(target, offset) {
   const r = image.data[offset+0],
         g = image.data[offset+1],
         b = image.data[offset+2],
         a =...