Color PIcker Circular

by B L Praveen

HTML

<canvas id="canvas" width=250 height=250></canvas>

JavaScript

renderGradient();
    function renderGradient() {
      var color, colors, gradient, index, xy, _i, _len, _ref, _ref1;
	  var canvas = document.getElementById('canvas'); 
	  var ctx = canvas.getContext('2d');
	  renderSpectrum();	  

     
     //ctx.fillStyle = 'rgb(0, 0, 0)';
	  var r_width =  canvas.width * 0.8,
		toRad = (2 * Math.PI) / 360,
		width =  Math.sqrt((r_width * r_width)/2),
		p_side =  r_width + r_width * Math.cos(135 * toRad);
        return ctx.strokeRect(p_side, p_side, width, width);
      //return ctx.fillRect(p_side, p_side, width, width);
    };
    function renderSpectrum() {
	  var canvas = document.getElementById('canvas'); 
	  var ctx = canvas.getContext('2d');	
        var radius = canvas.width / 2;
        var toRad = (2 * Math.PI) / 360;
        var step = 1 / radius;
		
       ctx.clearRect(0, 0, canvas.width, canvas.height);

        for(var i = 0; i < 360; i += step) {
            var rad = i * toRad;
            ctx.strokeStyle = 'hsl(' + i + ', 100%, 50%)';
            ctx.beginPath();
            ctx.moveTo(radius, radius);
            ctx.lineTo(radius + radius * Math.cos(rad), radius + radius * Math.sin(rad));
            ctx.stroke();
        }

       ctx.fillStyle = 'rgb(255, 255, 255)';
       ctx.beginPath();
       ctx.arc(radius, radius, radius * 0.8, 0, Math.PI * 2, true);
       ctx.closePath();
       return ctx.fill();
	
	}