browser ⟩ canvas ⟩ graphics state ⟩ fill/stroke styles ⟩ colors ⟩ color wheel
💾 replit：color wheel
⬆️ require： drawOnCanvas2D()
function deg(x) { return Math.PI * x / 180 } // degrees
// color wheel
function colorWheel(n) {
// draw on canvas
drawOnCanvas2D('#playground', (ctx) => {
const dt = deg(360) / n;
const dh = 360 / n;
const r = 100;
const dx = 20;
const center = [r + dx, r + dx];
for (let i = 0; i < n; i++) {
const angle = deg(-90) + dt * i;
const range = [angle - dt / 2, angle + dt / 2];
const hue = dh * i;
ctx.beginPath();
ctx.moveTo(...center);
ctx.arc(...center, r, ...range);
ctx.fillStyle = `hsl(${hue} 100% 50%)`;
ctx.fill();
}
});
}
// 12-color color wheel
colorWheel(12);
