MoHamed HaSsn MoHamed HaSsn -4 years ago 142
CSS Question

Make Arc Canvas Responsive

I've two questions the first question is how to make this countdown is responsive. I tried to make this responsive using Bootstrap but I was not able to reach a satisfactory result.

Note: You can remove my styles and start from scratch if you want.




The second problem is occurred when when I change the radius of the circle from 70 to any other value, that when I change the radius of my countdown circular the circular will be like this:

enter image description here

enter image description here

The code is here:



(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 = 90;


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 <= 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...................
if (days > 364) {
$('#myCanvas3').hide();
}
context3.clearRect(50, 50, canvas.width, canvas.height);
day_arc_end = ((-days) * parseFloat((0.10471 * 5) / 2)); // the problem is here
context3.beginPath();
context3.arc(centerX, centerY, radius, -0.5 * Math.PI, (((365 - days) / 365) * 2 - 0.5) * Math.PI, 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: "6 january 2018 6:34:00"
},
function () {
$("#countdown").text("merry christmas");
}
);
/*Make Canvas Responsive*/
$(".countdown-container").height($(".countdown-container").width());
$(window).resize(function () {
$(".countdown-container").height($(".countdown-container").width());
});
})

#countdown {
width: 100%;
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 #06ee7c;
}

<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>





Note:


  • Please run code in full page

  • Wait for 1 minutes that the radius problem is occurred after each session


Answer Source

Use clearRect(0,0,width,height) instead of clearRect(50,50,width,height).

(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 = 90;


	    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 <= 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(0, 0, 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(0, 0, 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(0, 0, 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...................
	      if (days > 364) {
	          $('#myCanvas3').hide();
	      }
	      context3.clearRect(0, 0, canvas.width, canvas.height);
	      day_arc_end = ((-days) * parseFloat((0.10471 * 5) / 2));  // the problem is here
	      context3.beginPath();
	      context3.arc(centerX, centerY, radius, -0.5 * Math.PI, (((365 - days) / 365) * 2 - 0.5) * Math.PI, 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: "6 january 2018 6:34:00"
	    },
	      function () {
	          $("#countdown").text("merry christmas");
	      }
	    );
	    /*Make Canvas Responsive*/
	    $(".countdown-container").height($(".countdown-container").width());
	    $(window).resize(function () {
	        $(".countdown-container").height($(".countdown-container").width());
	    });
	})
#countdown {
  width: 100%;
  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 #06ee7c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download