Countdown Timer with canvas

Hi.

Here is my suggestion.

Complete ignore the code for the buttons if you wish. You can just set the initialMinutes variable to 45 and then only call the startTimer function.

Preview:

JavaScript code:

var that = this;
this.initialMinutes = 0.2; // set here to 45
this.totalTime = 0;
this.currentTime = 0;
this.interval = 0;
this.start = function()
{
     that.startTimer(that.updateCallBack, that.endCallback);
     that.startButton.on("click", function(e){that.startTimer(that.updateCallBack, that.endCallback)}, this);
     that.stopButton.on("click", function(e){that.stopTimer(that.stopCallback)}, this);
     that.pauseButton.on("click", function(e){that.pauseTimer(that.pauseCallback)}, this);
     that.resumeButton.on("click", function(e){that.resumeTimer(that.resumeCallback, that.updateCallBack, that.endCallback)}, this);
};
this.updateCallBack = function()
{
     that.setText();
};
this.endCallback = function()
{
     that.mc.visible = false
};
this.stopCallback = function()
{
     console.log("stopped");
};
this.pauseCallback = function()
{
     console.log("paused");
};
this.resumeCallback = function()
{
     console.log("resumed");
};
this.startTimer = function(updateCallback, endCallback)
{
     clearInterval(that.interval);
     that.totalTime = that.minutesToMilliseconds(that.initialMinutes);
     that.currentTime = that.totalTime;
     that.setText();
     that.setTime(updateCallback, endCallback);
};
this.stopTimer = function(callback)
{
     clearInterval(that.interval);
     that.totalTime = 0;
     that.currentTime = 0;
     that.setText();
     callback();
};
this.pauseTimer = function(callback)
{
     clearInterval(that.interval);
     that.totalTime = that.currentTime;
     callback();
};
this.resumeTimer = function(resumeCallback, updateCallback, endCallback)
{
     if (that.currentTime == 0)
          return;
     clearInterval(that.interval);
     that.totalTime = that.currentTime;
     that.setTime(updateCallback, endCallback);
     resumeCallback();
};
this.setTime = function(updateCallback, endCallback)
{
     that.interval = setInterval(function()
     {
          that.currentTime -= 1000;
          updateCallback();
          if (that.currentTime == 0)
          {
               clearInterval(that.interval);
               endCallback();
          }
     }, 1000);
};
this.setText = function()
{
     var time = that.timeCode(that.currentTime);
     that.timeText.text = time.minutes + ":" + time.seconds;
};
this.minutesToMilliseconds = function(minutes)
{
     return 1000 * 60 * minutes;
};
this.timeCode = function(milliseconds)
{
     var seconds = Math.floor((milliseconds / 1000) % 60);
     var strSeconds = (seconds < 10) ? ("0" + String(seconds)) : String(seconds);
     var minutes = Math.round(Math.floor((milliseconds / 1000) / 60));
     var strMinutes = (minutes < 10) ? ("0" + String(minutes)) : String(minutes);
     return {seconds: strSeconds, minutes: strMinutes};
};
this.start();

FLA download:

animate_cc_html5_timer_02.zip - Google Drive

Please let me know if there is some concept you don't understand.

I hope this helps.

Regards,

JC