JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<canvas id="color-wheel">

</canvas>

CSS

body {
  background-color: rgb(33, 33, 33);
}

JavaScript

class colorParameters {
  constructor(radius) {
    this.radius = radius;
  }
}

const Colorizer = (function() {
  'use strict';
  const self = {};

  /**
   *  Draws a colorized wheel picker on the given element
   *  @param target - the target element to apply colorization to
   *  @param parameters{colorParameters} - The parameters used to control the output
   */
  self.colorize = function(target, parameters) {
  	console.log(parameters);
    if (!target) {
      throw Error('No DOM element provided to colorize.');
    }

    const context = target.getContext('2d');
    const dimensions = {
      x: target.width / 2,
      y: target.height / 2,
      r: parameters.radius
    };
    
    for(let angle = 0; angle <= 360; angle++) {
    	let startAngle = (angle - 2) * Math.PI / 180;
      let endAngle = angle * Math.PI / 180;
      context.beginPath();
      context.moveTo(dimensions.x, dimensions.y);
      context.arc(dimensions.x, dimensions.y, dimensions.r, startAngle, endAngle, false);
      context.closePath();
      let gradient = context.createRadialGradient(dimensions.x, dimensions.y, 0, dimensions.x, dimensions.y, dimensions.r);
      gradient.addColorStop(0, 'hsl('+angle+', 10%, 100%)');
      gradient.addColorStop(1, 'hsl('+angle+', 100%, 50%)');
      context.fillStyle = gradient;
      context.fill();
    }
    
    context.fillStyle = 'rgb(33, 33, 33)';
    context.beginPath();
    context.arc(dimensions.x, dimensions.r, dimensions.r * 0.8, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();
    context.clearRect(115, 40, dimensions.x/2, dimensions.y);
  };

  return self;
})();

Colorizer.colorize(document.getElementById('color-wheel'), {
  radius: 75
});