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.beginPath()
//	ctx.arc(mid, mid, size, size, 0, Math.PI * 2)
//	ctx.clip()

	ctx.circularGradient(mid, mid, size / 2, function (i) {
		console.log(i);
		return '#' + Array(4).join(Math.round(i * 255).toString(16))
	});


//	for (var i = size; i > 0; i--) {
//		console.log(i)
//		ctx.beginPath()
//		console.log(Math.round((i/size) * 255).toString(16))
//		ctx.strokeStyle = '#' + Array(4).join(Math.round((i/size) * 255).toString(16))
//		ctx.lineWidth = 10
//		ctx.moveTo(mid, mid)
//
//		var end = (new Polar(mid + 1, i * degree)).toCartesian()
//		ctx.lineTo(mid + end.x, mid + end.y)
//		ctx.stroke()
//
//		console.log(end)
//	}
}