Colour-Wheel on Canvas (arc + fillStyle=radialGradient)

by denvdmj

HTML

<canvas id="colour-wheel" width="400" height="400"></canvas>

JavaScript

var canvas = document.getElementById('colour-wheel');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = canvas.width / 2.3;
var counterClockwise = false;
var PI_180 = Math.PI / 180;

for (var angle = 0; angle <= 360; angle += 1) {
  var startAngle = (angle - 2) * PI_180;
  var endAngle = angle * PI_180;
  context.beginPath();
  context.moveTo(x, y);
  context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
  context.closePath();
  var gradient = context.createRadialGradient(x, y, 0, x, y, radius);
  gradient.addColorStop(0, 'hsl('+angle+', 10%, 100%)');
  gradient.addColorStop(1, 'hsl('+angle+', 100%, 50%)');
  context.fillStyle = gradient;
  context.fill();
}