Color Wheel on canvas

Based on stack overflow: http://stackoverflow.com/questions/18265804/building-a-color-wheel-in-html5

by th3uiguy

HTML

<canvas id="picker" height="200" width="200"></canvas>

CSS

#picker{
  height: 200px;
  width: 200px;
}

JavaScript

var canvas = document.getElementById("picker");
var context = canvas.getContext("2d");
var x = canvas.clientWidth / 2;
var y = canvas.clientHeight / 2;
console.log(x, y)
var radius = 100;
var counterClockwise = false;

for(var angle=0; angle<=360; angle+=1){
    var startAngle = (angle-2)*Math.PI/180;
    var endAngle = angle * Math.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();
}