function degToRad(degree){
	var factor = Math.PI/180;
	return degree*factor;
	}
	
function renderTime(){
  
    //Von der "Bib" Date now obj
    var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	ctx.strokeStyle ='lightblue';
	ctx.lineWidth = 17;
	ctx.lineCap = 'round';
	ctx.shadowBlur =15;
	ctx.shadowColor='lightblue';
	
	
	var now = new Date();
	var today = now.toDateString();
	var time = now.toLocaleTimeString();
	var hour = now.getHours();
    var minutes = now.getMinutes();
	var seconds = now.getSeconds();
	var milliseconds = now.getMilliseconds();
	var newSeconds = seconds+(milliseconds/1000);
	
//Background
	//außen innen
  gradient = ctx.createRadialGradient(250,250,5,  250,250,300);
  gradient.addColorStop(0, 'green');
  gradient.addColorStop(1, 'black');
  //ctx.fillStyle = 'grey';
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 500, 500);

//Hours (px),(px),radius,startpunkt
  ctx.beginPath();
  ctx.arc(250, 250, 200, degToRad(270), degToRad((minutes*15)-90));
  ctx.stroke();
//Minutes
  ctx.beginPath();
  ctx.arc(250, 250, 170, degToRad(270), degToRad((minutes*6)-90));
  ctx.stroke();

//Seconds
  ctx.beginPath();
  ctx.arc(250, 250, 140, degToRad(270), degToRad((newSeconds*6)-90));
  ctx.stroke();

//Date
  ctx.font = "25px Arial bold";
  ctx.fillStyle ='lightblue';
  ctx.fillText(today, 175, 250);

//Time
  ctx.font = "20px Arial ";
  ctx.fillStyle ='lightblue';
  ctx.fillText(time, 175, 280);
	
}

//renderTime();