JS1k: The JavaScript code golfing competition

w=c.width;h=c.height;x=w/2;y=h/2;r=60;o=window;function D(){M=Math;p=M.PI;W="#FFF";n=new Date();h=n.getHours()%12;m=n.getMinutes();s=n.getSeconds();d=n.getDate();a.arc(x,y,r,0,2*p,false);a.stroke();z=a.createLinearGradient(x-r,y-r,x+r,y+r);z.addColorStop(0,W);z.addColorStop(1,"#DDF");a.fillStyle=z;a.fill();a.fillStyle="#000";a.fillText(12,x-7,y-42);a.fillText(3,x+42,y+4);a.fillText(6,x-3,y+48);a.fillText(9,x-48,y+4);for(i=0;i<60;i++){g=i*p/30;B=M.sin(g);C=M.cos(g);a.beginPath();a.moveTo(x+53*B,y-53*C);a.lineTo(x+59*B,y-59*C);a.strokeStyle="GREY";a.stroke();}a.rect(x+20,y-5,16,10);a.stroke();a.fillText(d,x+22,y+4);N=m*60+s;S=p*(h*3600+N)/21600;j=M.sin(S);k=M.cos(S);a.beginPath();a.moveTo(x-12*j,y+12*k);a.lineTo(x+28*j,y-28*k);a.stroke();U=p*N/1800;l=M.sin(U);n=M.cos(U);a.moveTo(x-20*l,y+20*n);a.lineTo(x+40*l,y-40*n);a.stroke();V=p*s/30;u=M.sin(V);v=M.cos(V);a.beginPath();a.moveTo(x-14*u,y+14*v);a.lineTo(x+46*u,y-46*v);a.lineWidth=2;a.strokeStyle="red";a.stroke();a.closePath();setTimeout("D()",1000);}D();

dz1jLndpZHRoO2g9Yy5oZWlnaHQ7eD13LzI7eT1oLzI7cj02MDtvPXdpbmRvdztmdW5jdGlvbiBEKCl7TT1NYXRoO3A9TS5QSTtXPSIjRkZGIjtuPW5ldyBEYXRlKCk7aD1uLmdldEhvdXJzKCklMTI7bT1uLmdldE1pbnV0ZXMoKTtzPW4uZ2V0U2Vjb25kcygpO2Q9bi5nZXREYXRlKCk7YS5hcmMoeCx5LHIsMCwyKnAsZmFsc2UpO2Euc3Ryb2tlKCk7ej1hLmNyZWF0ZUxpbmVhckdyYWRpZW50KHgtcix5LXIseCtyLHkrcik7ei5hZGRDb2xvclN0b3AoMCxXKTt6LmFkZENvbG9yU3RvcCgxLCIjRERGIik7YS5maWxsU3R5bGU9ejthLmZpbGwoKTthLmZpbGxTdHlsZT0iIzAwMCI7YS5maWxsVGV4dCgxMix4LTcseS00Mik7YS5maWxsVGV4dCgzLHgrNDIseSs0KTthLmZpbGxUZXh0KDYseC0zLHkrNDgpO2EuZmlsbFRleHQoOSx4LTQ4LHkrNCk7Zm9yKGk9MDtpPDYwO2krKyl7Zz1pKnAvMzA7Qj1NLnNpbihnKTtDPU0uY29zKGcpO2EuYmVnaW5QYXRoKCk7YS5tb3ZlVG8oeCs1MypCLHktNTMqQyk7YS5saW5lVG8oeCs1OSpCLHktNTkqQyk7YS5zdHJva2VTdHlsZT0iR1JFWSI7YS5zdHJva2UoKTt9YS5yZWN0KHgrMjAseS01LDE2LDEwKTthLnN0cm9rZSgpO2EuZmlsbFRleHQoZCx4KzIyLHkrNCk7Tj1tKjYwK3M7Uz1wKihoKjM2MDArTikvMjE2MDA7aj1NLnNpbihTKTtrPU0uY29zKFMpO2EuYmVnaW5QYXRoKCk7YS5tb3ZlVG8oeC0xMipqLHkrMTIqayk7YS5saW5lVG8oeCsyOCpqLHktMjgqayk7YS5zdHJva2UoKTtVPXAqTi8xODAwO2w9TS5zaW4oVSk7bj1NLmNvcyhVKTthLm1vdmVUbyh4LTIwKmwseSsyMCpuKTthLmxpbmVUbyh4KzQwKmwseS00MCpuKTthLnN0cm9rZSgpO1Y9cCpzLzMwO3U9TS5zaW4oVik7dj1NLmNvcyhWKTthLmJlZ2luUGF0aCgpO2EubW92ZVRvKHgtMTQqdSx5KzE0KnYpO2EubGluZVRvKHgrNDYqdSx5LTQ2KnYpO2EubGluZVdpZHRoPTI7YS5zdHJva2VTdHlsZT0icmVkIjthLnN0cm9rZSgpO2EuY2xvc2VQYXRoKCk7c2V0VGltZW91dCgiRCgpIiwxMDAwKTt9RCgpOw==

function load(){
	var clock=document.getElementById("clock");
	var context=clock.getContext("2d");

	//Get clock canvas width and height
	var width=clock.width;
	var height=clock.height;
	var centerX=width/2;
	var centerY=height/2;
	var radius=90;
    //Get current time
    var now=new Date();
    var hour=now.getHours()%12;
    var minute=now.getMinutes();
    var second=now.getSeconds();
    var date=now.getDate();
    
	//Start draw the clock face
	context.clearRect(0,0,width,height);
	context.beginPath();
	context.arc(centerX, centerY, radius+10, 0, 2 * Math.PI, false);
	context.lineWidth = 5;
    context.strokeStyle = "grey";
    context.stroke();
    context.closePath();
    
    context.beginPath();
	//context.globalAlpha = 0.5; // set global alpha
	context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
	context.lineWidth = 5;
    context.strokeStyle = "grey";
    context.stroke();
    // add linear gradient
    var grd = context.createLinearGradient(centerX-radius, centerY-radius,centerX+radius, centerY+radius);
    grd.addColorStop(0, "#FFFFFF"); // light blue
    grd.addColorStop(1, "#DDDDFF"); // dark blue
    context.fillStyle = grd;
    context.fill();
    context.closePath();
    
    context.beginPath();
    context.arc(centerX, centerY, 5, 0, 2 * Math.PI, false);
	context.lineWidth = 5;
    context.strokeStyle = "grey";
    context.stroke();
    context.closePath();
    
    //Draw mark
    drawMark(clock,radius);
    
    //Draw text
    context.beginPath();
    context.font="7.5pt";
    context.fillStyle = "#000000"; // text color
    context.fillText("12",centerX-7,centerY-radius+18);
    context.fillText("3",centerX+radius-18,centerY+4);
    context.fillText("6",centerX-3,centerY+radius-12);
    context.fillText("9",centerX-radius+12,centerY+4);

    context.beginPath();
    context.rect(centerX+radius-40,centerY-5,16,10);
    context.lineWidth = 1;
    context.strokeStyle = "black";
    context.stroke();
    context.fillStyle = "#FFFFFF"; // text color
    context.fill();
    context.closePath();

    context.font="7.5pt";
    context.fillStyle = "#000000"; // text color
    context.fillText(date,centerX+radius-36,centerY+3);
    
    //Draw hour hand
    var hourHandWidth=60;
    var hourHandHeight=5;
    var hourHandLongWidth=50;
    var hourHandShortWidth=hourHandWidth-hourHandLongWidth;
    var hourAmount=12*60*60;
	var hourFraction=(360/hourAmount)*Math.PI/180;
    var hourInSeconds=hour*60*60+minute*60+second;
	var hourAngle=hourFraction*hourInSeconds;

	var hourStartX=centerX-hourHandShortWidth*Math.sin(hourAngle);
	var hourStartY=centerY+hourHandShortWidth*Math.cos(hourAngle);
	var hourEndX=centerX+hourHandLongWidth*Math.sin(hourAngle);
	var hourEndY=centerY-hourHandLongWidth*Math.cos(hourAngle);
	context.beginPath();
	context.moveTo(hourStartX,hourStartY);
	context.lineTo(hourEndX,hourEndY);
	context.lineWidth = 5;
    context.strokeStyle = "black";
    context.lineCap = "round";
    context.stroke();

    //Draw minute hand
    var minuteHandWidth=80;
    var minuteHandHeight=5;
    var minuteHandLongWidth=60;
    var minuteHandShortWidth=minuteHandWidth-minuteHandLongWidth;
    var minuteAmount=60*60;
	var minuteFraction=(360/minuteAmount)*Math.PI/180;
    var minuteInSeconds=minute*60+second;
	var minuteAngle=minuteFraction*minuteInSeconds;

	var minuteStartX=centerX-minuteHandShortWidth*Math.sin(minuteAngle);
	var minuteStartY=centerY+minuteHandShortWidth*Math.cos(minuteAngle);
	var minuteEndX=centerX+minuteHandLongWidth*Math.sin(minuteAngle);
	var minuteEndY=centerY-minuteHandLongWidth*Math.cos(minuteAngle);
	context.beginPath();
	context.moveTo(minuteStartX,minuteStartY);
	context.lineTo(minuteEndX,minuteEndY);
	context.lineWidth = 5;
    context.strokeStyle = "grey";
    context.lineCap = "round";
    context.stroke();

    //Draw second hand
    var secondHandWidth=90;
    var secondHandHeight=3;
    var secondHandLongWidth=66;
    var secondHandShortWidth=secondHandWidth-secondHandLongWidth;
    var secondAmount=60;
	var secondFraction=(360/secondAmount)*Math.PI/180;
    var secondInSeconds=second;
	var secondAngle=secondFraction*secondInSeconds;

	var secondStartX=centerX-secondHandShortWidth*Math.sin(secondAngle);
	var secondStartY=centerY+secondHandShortWidth*Math.cos(secondAngle);
	var secondEndX=centerX+secondHandLongWidth*Math.sin(secondAngle);
	var secondEndY=centerY-secondHandLongWidth*Math.cos(secondAngle);
	context.beginPath();
	context.moveTo(secondStartX,secondStartY);
	context.lineTo(secondEndX,secondEndY);
	context.lineWidth = 3;
    context.strokeStyle = "red";
    context.stroke();
    context.closePath();
    
    // request new frame
    requestAnimFrame(function(){
        load();
    });
}
function drawMark(clock,radius){
	var context=clock.getContext("2d");	
	//Get clock canvas width and height
	var width=clock.width;
	var height=clock.height;
	var centerX=width/2;
	var centerY=height/2;
	
	var markLength=6;
	var markFraction=12*Math.PI/360;
	for(var i=0;i<=59;i++){
		var extraLength=0;
		if(i%5==0){
			extraLength=4;
		}
		var angle=i*markFraction;
		var startX=centerX+(radius-1-markLength-extraLength)*Math.sin(angle);
		var startY=centerY-(radius-1-markLength-extraLength)*Math.cos(angle);
		var endX=centerX+(radius-1)*Math.sin(angle);
		var endY=centerY-(radius-1)*Math.cos(angle);
		context.beginPath();
		context.moveTo(startX,startY);
		context.lineTo(endX,endY);
		context.lineWidth = 2;
		if(i%5==0){
			context.strokeStyle = "grey";
		}else{
			context.strokeStyle = "#9999FF";
		}
	    
	    context.stroke();
	    context.closePath();
	}
}
window.requestAnimFrame = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000);
    };
})();
window.onload=load;