circulargrad.js

Math.TAU = Math.PI * 2

CanvasRenderingContext2D.prototype.circularGradient = function (x, y, r, fn) {
	var circum = Math.TAU * r 
	var width = 5
	var lines = circum / (width-1)

	console.log(lines)

	this.lineWidth = width

	for (var i = 0; i < lines; i++) {
		this.beginPath()
		this.moveTo(x, y)
	
		var theta = (i / lines) * Math.TAU

		console.log(i, lines, theta / (Math.PI / 180));

		var end = (new Polar(r, theta)).toCartesian()
		this.lineTo(x + end.x, y + end.y)

		this.strokeStyle = fn(i / lines)

		this.stroke()
	}
};

colorring.js

$(function(){
  doItFgt($('#cocks'));
})
 
var degree = Math.PI / 180;
 
var doItFgt = function (el) {
	var size = el.height()
	var mid = size / 2
	var ctx = el[0].getContext('2d')
 
	ctx.circularGradient(mid, mid, size / 2, function (i) {
		console.log(i);
		return '#' + Array(4).join(Math.round(i * 255).toString(16))
	});
}