Canvas2D: Color disc

README.md

Canvas2D: Color disc

view on jsgist

index.css

:root {
  color-scheme: light dark;
}
canvas {
  border: 1px solld black;
}

index.html

/*bug-in-github-api-content-can-not-be-empty*/

index.js

const size = 256;
const canvas = document.createElement('canvas');
canvas.width = size;
canvas.height = size;
document.body.append(canvas);

ctx = canvas.getContext('2d');

const hsl = (h, s, l) => `hsl(${h * 360 | 0}, ${s * 100}%, ${l * 100 | 0}%)`;
const lerp = (a, b, l) => a + (b - a) * l;

const half = size / 2;
const quarter = half / 2;
for (let y = 0; y < size; ++y) {
  for (let x = 0; x < size; ++x) {
    const dx = half - x;
    const dy = half - y;
    const a = Math.atan2(dy, dx) / Math.PI * 0.5 + 0.5;
    const r = Math.sqrt(dx * dx + dy * dy);
    if (r < half) {
      const [s, l] = r < quarter
        ? [1, r / quarter * 0.5]
        : [1, r / half]
      ctx.fillStyle = hsl(a, 1, lerp(0, 0.9, Math.pow(r / half, 0.75)));
      ctx.fillRect(x, y, 1, 1);
    }
  }
}

jsGist.json

{"name":"Canvas2D: Color disc","settings":{},"filenames":["index.html","index.css","index.js"]}