title: Divide Canvas Arc To 364 Days
body: <p>My question is how to divide countdown days circular to 364 days, I mean when the number of remaining days is equal 364 days make circular like this:</p>
  
  <p><a href="https://i.stack.imgur.com/UnHB2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UnHB2.png" alt="enter image description here"></a></p>
  
  <p>and when the number of remaining days is equal 0 days make circular like this:</p>
  
  <p><a href="https://i.stack.imgur.com/9JXKO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9JXKO.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function($) {
    jQuery.fn.countdown = function(options, callback) {
      var settings = {
        'date': null
      };
      if (options) {
        $.extend(settings, options);
      }
      this_sel = $(this);
      /*Canvas JavaScript*/
      var canvas = document.getElementById('myCanvas');
      var canvas1 = document.getElementById('myCanvas1');
      var canvas2 = document.getElementById('myCanvas2');
      var canvas3 = document.getElementById('myCanvas3');
      var context = canvas.getContext('2d');
      var context1 = canvas1.getContext('2d');
      var context2 = canvas2.getContext('2d');
      var context3 = canvas3.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 100;
  
  
      var sec_arc_end = 0,
        min_arc_end = 0,
        hour_arc_end = 0,
        day_arc_end = 0;
  
      function count_exec() {
        eventDate = Date.parse(settings['date']) / 1000;
        currentDate = Math.floor($.now() / 1000);
        if (eventDate &lt;= currentDate) {
          callback.call(this);
          clearInterval(interval);
        }
        seconds = eventDate - currentDate;
  
        days = Math.floor(seconds / (60 * 60 * 24));
  
        seconds -= days * 60 * 60 * 24;
        hours = Math.floor(seconds / (60 * 60));
        seconds -= hours * 60 * 60;
        minutes = Math.floor(seconds / 60);
        seconds -= minutes * 60;
  
        // seconds arc canvas...................
        context.clearRect(50, 50, canvas.width, canvas.height);
        sec_arc_end = ((60 - seconds) * parseFloat(0.10472));
        context.beginPath();
        context.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + sec_arc_end, false);
        context.lineWidth = 8;
        context.strokeStyle = '#14E170';
        context.stroke();
  
        // minutes arc canvas...................
        context1.clearRect(50, 50, canvas.width, canvas.height);
        min_arc_end = ((60 - minutes) * parseFloat(0.10471));
        context1.beginPath();
        context1.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + min_arc_end, false);
        context1.lineWidth = 8;
        context1.strokeStyle = '#14E170';
        context1.stroke();
          // hours arc canvas...................
  
        context2.clearRect(50, 50, canvas.width, canvas.height);
        hour_arc_end = ((24 - hours) * parseFloat((0.10471 * 5) / 2));
        context2.beginPath();
        context2.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + hour_arc_end, false);
        context2.lineWidth = 8;
        context2.strokeStyle = '#14E170';
        context2.stroke();
          // days arc canvas...................
          // the problem is here
        context3.clearRect(50, 50, canvas.width, canvas.height);
        day_arc_end = ((- days) * parseFloat((0.10471 * 5) / 2));
        context3.beginPath();
        context3.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + day_arc_end, false);
        context3.lineWidth = 8;
        context3.strokeStyle = '#14E170';
        context3.stroke();
        // add 0 value to left of value
        if (!isNaN(eventDate)) {
          this_sel.find('.days').text(days);
          this_sel.find('.hours').text(hours);
          this_sel.find('.mins').text(minutes);
          this_sel.find('.secs').text(seconds);
        }
      }
      count_exec();
      console.log(days);
      interval = setInterval(count_exec, 1000);
    };
  })(jQuery);
  $(document).ready(function () {
      $("#countdown").countdown({
          date: "18 january 2017 12:34:00"
      },
        function () {
            $("#countdown").text("merry christmas");
        }
      );
      $(".countdown-container").height($(".countdown-container").width());
      $(window).resize(function () {
          $(".countdown-container").height($(".countdown-container").width());
      });
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#countdown {
    width: 100%;
    height: 150px;
    background-color: grey;
    padding: 5px;
  }
  .countdown-container {
    width: 24%;
    height: 97%;
    text-align: center;
  }
  #countdown .countdown-container {
    text-align: center;
    float: left;
    position: relative;
    margin: 0.30% 0.5% 0.30% 0.5%;
  }
  #countdown .countdown-container .contents {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-size-adjust: 0.58;
  }
  .contents div {
    font-size: 28px;
  }
  .contents span {
    font-size: 16px;
  }
  canvas {
    width: 100%;
    height: 100%;
    border:1px solid #ff6a00;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="countdown"&gt;
          &lt;div class="countdown-container"&gt;
              &lt;div class="contents"&gt;
                  &lt;div class="secs"&gt;
                      00
                  &lt;/div&gt;
                  &lt;span&gt;Seconds&lt;/span&gt;
              &lt;/div&gt;
              &lt;canvas id="myCanvas" width="250" height="250"&gt;&lt;/canvas&gt;
  
          &lt;/div&gt;
          &lt;div class="countdown-container"&gt;
              &lt;div class="contents"&gt;
                  &lt;div class="mins"&gt;
                      00
                  &lt;/div&gt;
                  &lt;span&gt;Minutes&lt;/span&gt;
              &lt;/div&gt;
              &lt;canvas id="myCanvas1" width="250" height="250"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
          &lt;div class="countdown-container"&gt;
              &lt;div class="contents"&gt;
                  &lt;div class="hours"&gt;
                      00
                  &lt;/div&gt;
                  &lt;span&gt;Hours&lt;/span&gt;
              &lt;/div&gt;
              &lt;canvas id="myCanvas2" width="250" height="250"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
          &lt;div class="countdown-container"&gt;
              &lt;div class="contents"&gt;
                  &lt;div class="days"&gt;
                      00
                  &lt;/div&gt;
                  &lt;span&gt;Days&lt;/span&gt;
              &lt;/div&gt;
              &lt;canvas id="myCanvas3" width="250" height="250"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>The problem</strong> is here:</p>
  
  <pre><code>day_arc_end = ((-days) * parseFloat((0.10471 * 5) / 2));  // the problem is here
  </code></pre>