## Relative Arc Canvas to Seconds Timer

Question

How to Make Relative Between timers and Circle Arc i need Circle start from 0 Deg to 360 Deg Depend on seconds of time:

so could anyone help me how to relative timer with canvas? Note: I don't prefer using Ready Plugins

``````(function (\$) {
jQuery.fn.countdown = function (options, callback) {
var settings = { 'date': null };
if (options) {
\$.extend(settings, options);
}
this_sel = \$(this);
function count_exec() {
eventDate = Date.parse(settings['date']) / 1000;
currentDate = Math.floor(\$.now() / 1000);
if (eventDate <= 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;

// 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();
interval = setInterval(count_exec, 1000);

/*Canvas JavaScript*/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 8;
context.strokeStyle = '#14E170';
context.stroke();
};
})(jQuery);
\$("#countdown").countdown({
date: "6 january 2017 7:15:00"
},
function () {
\$("#countdown").text("merry christmas");
}
);

})``````
``````#countdown .countdown-container{
width:20%;
position:relative;
float:left;
border:1px solid #0fd562;
margin-right:50px;
}
#countdown .countdown-container >div{
position:absolute;
top:100px;
left:95px;
text-align:center;
}
.secs, span{
font-size:16px;
}``````
``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="countdown">
<div class="countdown-container">
<div class="contents">
<div class="secs">
00
</div>
<span>Seconds</span>
</div>
<canvas id="myCanvas" width="250" height="250"></canvas>
</div>
<div class="countdown-container">
<div class="contents">
<div class="mins">
00
</div>
<span>Minutes</span>
</div>
<canvas id="myCanvas2" width="250" height="250"></canvas>
</div>
<div class="countdown-container">
<div class="contents">
<div class="hours">
00
</div>
<span>Hours</span>
</div>
<canvas id="myCanvas3" width="250" height="250"></canvas>
</div>
<div class="countdown-container">
<div class="contents">
<div class="days">
00
</div>
<span>Days</span>
</div>
<canvas id="myCanvas4" width="250" height="250"></canvas>
</div>
</div>``````

Please Run Code snippet in full page

Show source

## Answers to Relative Arc Canvas to Seconds Timer ( 5 )

1. Just try it...

CSS

``````<style>
.countdown-container{
width: 250px;
position: absolute;
height: 250px;
top: 0;
left: 0;
text-align: center;
}
#countdown{
position: relative;
}

</style>
``````

HTML

``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="countdown">
<div class="countdown-container">
<div class="secs">
00
</div>
<span>Seconds</span>
</div>
<canvas id="myCanvas" width="250" height="250"></canvas>
</div>
``````

JS

``````<script>
(function (\$) {
jQuery.fn.countdown = function (options, callback) {
var settings = {'date': null};
if (options) {
\$.extend(settings, options);
}
this_sel = \$(this);
function count_exec() {
eventDate = Date.parse(settings['date']) / 1000;
currentDate = Math.floor(\$.now() / 1000);
if (eventDate <= 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;

// 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').animate({'font-size': '100px'}, 1000).text(seconds);
}
}
count_exec();
interval = setInterval(count_exec, 1000);

/*Canvas JavaScript*/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 8;
context.strokeStyle = '#14E170';
context.stroke();
};
})(jQuery);
\$("#countdown").countdown({
date: "6 january 2017 7:15:00"
},
function () {
\$("#countdown").text("merry christmas");
}
);

})
</script>
``````

I hope its helful for you.

2. ``````(function (\$) {
jQuery.fn.countdown = function (options, callback) {
var settings = { 'date': null };
if (options) {
\$.extend(settings, options);
}
this_sel = \$(this);
function count_exec() {
eventDate = Date.parse(settings['date']) / 1000;
currentDate = Math.floor(\$.now() / 1000);
if (eventDate <= 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;

// 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').animate({ 'font-size': '100px' },1000).text(seconds);
}
}
count_exec();
interval = setInterval(count_exec, 1000);

/*Canvas JavaScript*/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 8;
context.strokeStyle = '#14E170';
context.stroke();
};
})(jQuery);
\$("#countdown").countdown({
date: "6 january 2017 7:15:00"
},
function () {
\$("#countdown").text("merry christmas");
}
);

})``````
``````.countdown-container{
width: 250px;
position: absolute;
height: 250px;
top: 0;
left: 0;
text-align: center;
}
#countdown{
position: relative;
}``````
``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="countdown">
<div class="countdown-container">
<div class="secs">
00
</div>
<span>Seconds</span>
</div>
<canvas id="myCanvas" width="250" height="250"></canvas>
</div>``````

3. Try this , It will help you to achieve the degree increment, you can changet the rotation direction by replacing the `false`to `true` in the code `context.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + kk, false);`

``````(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 context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var kk = 0;
function count_exec() {
eventDate = Date.parse(settings['date']) / 1000;
currentDate = Math.floor(\$.now() / 1000);
if (eventDate <= 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;

context.clearRect(50, 50, canvas.width, canvas.height);
kk = ((seconds) * parseFloat(0.10471));

context.beginPath();
context.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + kk, false);
context.lineWidth = 8;
context.strokeStyle = '#14E170';
context.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').animate({
'font-size': '100px'
}, 1000).text(seconds);
}
}
count_exec();
interval = setInterval(count_exec, 1000);

};
})(jQuery);
\$("#countdown").countdown({
date: "6 january 2017 7:15:00"
},
function() {
\$("#countdown").text("merry christmas");
}
);

})``````
``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="countdown">
<div class="countdown-container">
<div class="secs">
00
</div>
<span>Seconds</span>
</div>
<canvas id="myCanvas" width="250" height="250"></canvas>
</div>``````

``````(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 context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var kk = 0;

function count_exec() {
eventDate = Date.parse(settings['date']) / 1000;
currentDate = Math.floor(\$.now() / 1000);
if (eventDate <= 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;

context.clearRect(50, 50, canvas.width, canvas.height);
kk = ((60 - seconds) * parseFloat(0.10471));

context.beginPath();
context.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + kk, false);
context.lineWidth = 8;
context.strokeStyle = '#14E170';
context.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').animate({
'font-size': '100px'
}, 1000).text(seconds);
}
}
count_exec();
interval = setInterval(count_exec, 1000);

};
})(jQuery);
\$("#countdown").countdown({
date: "6 january 2017 7:15:00"
},
function() {
\$("#countdown").text("merry christmas");
}
);

})``````
``````.countdown-container {
width: 250px;
position: absolute;
height: 250px;
top: 0;
left: 0;
text-align: center;
}
#countdown {
position: relative;
}``````
``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="countdown">
<div class="countdown-container">
<div class="secs">
00
</div>
<span>Seconds</span>
</div>
<canvas id="myCanvas" width="250" height="250"></canvas>
</div>``````

5. I hope this is what you need, try this

``````(function(\$) {
var date = new Date("2017-01-30");
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 sec_arc_end = 0,
min_arc_end = 0,
hour_arc_end = 0,
day_arc_end = 0;

function count_exec() {
eventDate = Date.parse(date) / 1000;
currentDate = Math.floor(\$.now() / 1000);
if (eventDate <= 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...................
context3.clearRect(50, 50, canvas.width, canvas.height);
hour_arc_end = ((days) * parseFloat((0.10471) * 2));
context3.beginPath();
context3.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + hour_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();
interval = setInterval(count_exec, 1000);

};
})(jQuery);
\$("#countdown").countdown({
date: "6 january 2017 7:15:00"
},
function() {
\$("#countdown").text("merry christmas");
}
);

})``````
``````#countdown {
width: 100%;
height: 150px;
background-color: grey;
}
.countdown-container {
width: 24%;
height: 97%;
text-align: center;
background-color: #0099FF;
position: absolute;
}
#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%);
}
.contents div {
font-size: 28px;
}
.contents span {
font-size: 16px;
}
canvas {
width: 100%;
height: 100%;
text-align: center;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}``````
``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="countdown">
<div class="countdown-container">

<div class="contents">
<div class="secs">
00
</div>
<span>Seconds</span>
</div>
<canvas id="myCanvas" width="250" height="250"></canvas>

</div>
<div class="countdown-container">
<div class="contents">
<div class="mins">
00
</div>
<span>Minutes</span>
</div>
<canvas id="myCanvas1" width="250" height="250"></canvas>
</div>
<div class="countdown-container">
<div class="contents">
<div class="hours">
00
</div>
<span>Hours</span>
</div>
<canvas id="myCanvas2" width="250" height="250"></canvas>
</div>
<div class="countdown-container">
<div class="contents">
<div class="days">
00
</div>
<span>Days</span>
</div>
<canvas id="myCanvas3" width="250" height="250"></canvas>
</div>
</div>``````