Having fun with html
<canvas> element. It can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.
<canvas id="draw" width="800" height="800"></canvas>
canvas element has bunch of properties that can be configured.
const ctx = canvas.getContext('2d'); ctx.strokeStyle = '#BADA55'; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.lineWidth = 10;
HSL cylinder from Wikipedia
- hue: The angular dimension starting at the red at 0°, passing through the treen primary at 120° and the blue primary at 240°, and then wrapping back to red at 360°
- saturation: 0 ~ 100%
- lightness: 0 ~ 100%
Note: Resizing browser will clear content.
- HLS and HSV - Wikipedia