function CountDown(zeitgeist){
  zeitgeist = zeitgeist-1;
  if(zeitgeist < 0){
    zeitgeist = 60;
  }
  
  return zeitgeist;
}
function degToRad(degree){
	var factor = Math.PI/180;
	return degree*factor;
}

var cds = 60;

function renderTime(){
		
    //Von der "Bib" Date now obj
    var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
  //style
   if(cds>30){
	ctx.strokeStyle ='green';
	ctx.lineWidth = 17;
	ctx.lineCap = 'round';
	ctx.shadowBlur =15;
	ctx.shadowColor='lightgreen';
  }
  if(cds<=31){
    ctx.strokeStyle ='yellow'; 
	ctx.lineWidth = 17;
	ctx.lineCap = 'round';
	ctx.shadowBlur =5;
	ctx.shadowColor='blue';
  }
   if(cds<=21){
    
    ctx.strokeStyle ='orange';
	ctx.lineWidth = 17;
	ctx.lineCap = 'round';
	ctx.shadowBlur =15;
	ctx.shadowColor='blue';
    
  }
   if(cds<=11){
     ctx.strokeStyle ='orange';
	ctx.lineWidth = 17;
	ctx.lineCap = 'round';
	ctx.shadowBlur =5;
	ctx.shadowColor='red';
   }
   if(cds<=6){
    ctx.strokeStyle ='red';
	ctx.lineWidth = 17;
	ctx.lineCap = 'round';
	ctx.shadowBlur =15;
	ctx.shadowColor='red';
   }
   if(cds<=0){
	alert("verpennt OPFA");
    //ctx.fillText("verpennt OPFA",240,260);
	clearInterval(myvar);
   }
	
	var now = new Date();
	var today = now.toDateString();
	var time = now.toLocaleTimeString();
	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, 'lightblue');
  gradient.addColorStop(1, 'white');
  //ctx.fillStyle = 'grey';
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 500, 500);
  

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

  
//Time
if(cds>30){
	ctx.font = "20px Arial ";
	ctx.fillStyle ='green';
	ctx.fillText(CountDown(cds),240,260);
  }
  if(cds<=31){
	ctx.font = "20px Arial ";
	ctx.fillStyle ='yellow';
	ctx.fillText(CountDown(cds),240,260);  
  }
    if(cds<=21){
	ctx.font = "20px Arial ";
	ctx.fillStyle ='orange';
	ctx.fillText(CountDown(cds),240,260);  
  }
    if(cds<=11){
	ctx.font = "20px Arial ";
	ctx.fillStyle ='lightred';
	ctx.fillText(CountDown(cds),240,260);  
  }
      if(cds<=6){
	ctx.font = "20px Arial ";
	ctx.fillStyle ='red';
	ctx.fillText(CountDown(cds),240,260);  
  }
  
  
  
  
  
  
  cds = CountDown(cds);
 
	
}