javascript - Canvas - Arc suddenly vanishes -

so i'm making basic clock fun minute , second arcs. however, after new minute starts, minute arc vanishes canvas. why?

here jsfiddle: https://jsfiddle.net/y0bson6f/

html

<canvas id="clock"></canvas> 

css

body, html {     width: 100%;     height: 100%;     margin: 0px;     font-family: josefin sans, helvetica, sans-serif;     background: #1a4978; } 

js

    var canvas = document.getelementbyid('clock');     var context = canvas.getcontext('2d');      function setdimensions() {         context.canvas.width = window.innerwidth * 0.69;         context.canvas.height = window.innerheight;     }      setdimensions();      var x = 0.5 * canvas.width;     var y = canvas.height / 2;     var radius = 0.25 * context.canvas.width;     var startangle = 0;     var endangle = 2 * math.pi;     var startanimationminutedone = false;     var firsttime = false;      function updateminute(start, end) {         if (startanimationminutedone == false && firsttime == false) {             context.clearrect(0, 0, canvas.width, canvas.height);         }          setdimensions();         context.beginpath();         context.strokestyle = "#ff7519";         context.arc(x, y, radius, start, end);         context.linewidth = 20;         context.stroke();         context.closepath();     }      function updatesecond(start, end) {         context.beginpath();         context.strokestyle = "#ffa319";         radius = 0.25 * context.canvas.width + 20;         context.arc(x, y, radius, start, end);         context.stroke();         context.closepath();     }      function minuteantialias(start, end) {         context.clearrect(0, 0, canvas.width, canvas.height);         setdimensions();         context.beginpath();         context.strokestyle = "#1a4978";         context.arc(x, y, radius, start, end);         context.linewidth = 20;         context.stroke();         context.closepath();     }      function secondantialias(start, end) {         context.beginpath();         context.strokestyle = "#1a4978";         radius = 0.25 * context.canvas.width + 40;         context.arc(x, y, radius, start, end);         context.stroke();         context.closepath();     }      $(document).ready(function() {         var time = 0;         var count = 0;          function clock() {             var date = new date();             var year = date.getfullyear();             var month = date.getmonth();             var day = date.getday();             var hour = date.gethours();              if (hour > 12) {                 hour -= 12;             }              var minute = date.getminutes();             var second = date.getseconds();              var newestminutestart = (time + 1.5) * math.pi;             var newestsecondstart = (time + 1.5) * math.pi;              var cachedtime;              if (count <= minute / 30 && !startanimationminutedone) {                 time += 0.01;                 updateminute(1.5 * math.pi, (time + 1.5) * math.pi);                 count += 0.01;                 cachedtime = time;              } else if (!startanimationminutedone) {                 time = 0;                 count = 0;                 startanimationminutedone = true;              } else if (count <= second / 30 || second == 0 && startanimationminutedone) {                 time += 0.01;                 updatesecond(1.5 * math.pi, (time + 1.5) * math.pi);                 secondantialias(0, 2 * math.pi); // arc matching background colour gives effect of greater sharpness                 count += 0.01;                  if (second == 0) {                     context.clearrect(0, 0, canvas.width, canvas.height);                     startanimationminutedone = false;                     firsttime = true;                     time = 0;                     count = 0;                 }                  console.log(second);                 console.log(startanimationminutedone);             }         }          setinterval(clock, 10);     }); 

this meant using different radii of both minute , second arc , in example interval show current time 1 second , not 10 milliseconds consumes great deal of cpu. keep animations , time separate 1 another:

var can = document.getelementbyid('canvas'); var ctx = can.getcontext('2d'); var width = can.width; var height = can.height;  // because arc start @ angle of 0 rad or 0 deg have rotate/translate canvas start @ angle of pi/2 rad or 90 deg ctx.rotate(-degtorad(90)); ctx.translate(-width,0);  var x = width*0.5; var y = height*0.5;  var minradius = width*0.45; var secradius = width*0.25;  function degtorad(deg){ return deg*(math.pi/180); }  function updateminute(start, end) {     ctx.beginpath();     ctx.strokestyle = "#ffa319";     ctx.arc(x, y, minradius, start, end);     ctx.stroke();     ctx.closepath(); }  function updatesecond(start, end) {     ctx.beginpath();     ctx.strokestyle = "#1a4978";     ctx.arc(x, y, secradius, start, end);     ctx.stroke();     ctx.closepath(); }  setinterval(function(){      var date = new date();     var min = date.getminutes();     var sec = date.getseconds();      var secdeg = sec*6;     var mindeg = min*6;      console.log('secdeg: ',secdeg, sec);     console.log('mindeg: ',mindeg, min);      ctx.clearrect(0, 0, width,height);      updateminute(0,degtorad(mindeg));     updatesecond(0,degtorad(secdeg));   },1000); 

html:

<canvas id="canvas" width="300" height="300"></canvas>