Cooldown without canvas

function Cooldown(duration) {
    var canvas;
    var timer = null;
    var lastTime;
    var accumulatedTime = 0;
    var remainedTime = 0;
    const frameTime = 0.03333;
    var radius = 100;
    var endTime = duration;
    var isLoop = false;
   
    this.setCanvas = function(elementName) {
        if(elementName === undefined) {
            canvas = undefined;
        }
        else {
            canvas = document.getElementById(elementName);
            initCanvas();
        }
    }
   
    this.setDuration = function(time) {
        endTime = time;
    }
   
    this.resetAnimation = function(useTime, goalTime) {
        accumulatedTime = useTime;
        endTime = goalTime;
        remainedTime = 0;   
        lastTime = getTime();
       
        if(accumulatedTime < endTime) {
            var degree = 360*accumulatedTime/endTime;
            this.render(degree);
        }
       
        if(isLoop === false) {
            isLoop = true;
            this.onFrameCooldown();
        }
    }
   
    this.addNormalShadow = function() {
        if(canvas === undefined)
            return;
        if(canvas.classList.contains("select-shadow"))
            canvas.classList.remove("select-shadow");
        canvas.classList.add('normal-shadow');
    }
   
    this.addSelectShadow = function() {
        if(canvas.classList.contains("normal-shadow"))
            canvas.classList.remove("normal-shadow");   
        canvas.classList.add('select-shadow');
    }   
   
    this.render = function(degree) {
        if(canvas === undefined)
            return;
        var digits = 6;
        var radian = degree * Math.pi/180;
        var ctx = canvas.getContext('2d');
       
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, canvas.width, canvas.height);       
       
        ctx.lineWidth = 3; 
        ctx.fillStyle = 'rgba(200,100,100,0.6)';
        ctx.strokeStyle = 'rgba(200,100,100,0.3)';
       
        ctx.translate(canvas.width/2, canvas.height/2);
        ctx.rotate(-Math.PI/2);     
       
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo( radius * Math.cos(0).toFixed(digits), radius * Math.sin(0).toFixed(digits));  
        ctx.moveTo(0, 0);
        ctx.lineTo( radius * Math.cos(radian).toFixed(digits), radius * Math.sin(radian).toFixed(digits));
        ctx.arc(0, 0, radius, degree * Math.PI/180, Math.PI*2, false);
        ctx.stroke();
        ctx.fill();
        ctx.closePath();          
    }
   
    this.clearCanvas = function() {
        if(canvas === undefined)
            return;
        var ctx = canvas.getContext('2d');
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
   
    this.endCooldown = function() {
        this.clearCanvas();
        if(timer)
            clearTimeout(timer);
        timer = null; 
        isLoop = false;
    }
   
    this.unlinkCanvas = function() {
        this.endCooldown();
        this.setCanvas(undefined);
    }

    var getTime = function() { return new Date().getTime(); }   
   
    var initCanvas = function() {
        if(canvas) {
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;
            radius = Math.sqrt(Math.pow(canvas.clientWidth, 2) + Math.pow(canvas.clientHeight, 2));     
        }   
    }
   
    var count = 0;
    this.onFrameCooldown  = function() {
        console.log("onFrameCooldown   " + String(count));
        count++;
   
        var self = this;
        if (!timer)
            return;
           
        var now = getTime();
        var repeat = this.updateCooldown((now - lastTime)/1000.0);      
        if(repeat === false || isLoop === false) {
            this.clearCanvas();
            isLoop = false;
            return;
        }
        lastTime = now;
        requestAnimationFrame(function() {
            self.onFrameCooldown();
        });
    }
   
    this.updateCooldown = function(deltaTime) {
        remainedTime = remainedTime + deltaTime;
        accumulatedTime += deltaTime;
        if (remainedTime > frameTime) {      
            remainedTime -= frameTime;
            var degree = 360*accumulatedTime/endTime;  
           
            var repeat = true;
            if(degree > 360) {
                degree = 360;
                repeat = false;
            }
            this.render(degree);
            return repeat;
        }
    } 
   
    this.initCooldown = function() {
        if (!timer) {
            initCanvas();
            isLoop = true;
            var self = this;
            timer = setTimeout(function() { self.endCooldown }, endTime*1000);
           
            lastTime = getTime();
            this.render(0);
            this.onFrameCooldown();
        }       
    }   
      
    this.play = function() {
        if (!timer)
            this.initCooldown();
    }       
};

document.addEventListener("keydown", onKeyDown);

var cooldown1 = new Cooldown(30);
cooldown1.setCanvas('myCanvas');
cooldown1.addNormalShadow();

var cooldown2 = new Cooldown(20);
cooldown2.setCanvas('myCanvas1');

var cooldown3 = new Cooldown(10);
cooldown3.setCanvas('myCanvas2');

var cooldown4 = new Cooldown(50);
var cooldown5 = new Cooldown(50);
cooldown4.play();
cooldown5.play();
       
function onKeyDown(e) {
    if(e.keyCode === '1'.charCodeAt(0)) {
        cooldown1.addSelectShadow();
        cooldown1.play();
    }
    else if(e.keyCode === '2'.charCodeAt(0)) {
        cooldown2.addSelectShadow();
        cooldown2.play();
    }
    else if(e.keyCode === '3'.charCodeAt(0)) {
        cooldown3.addSelectShadow();
        cooldown3.play();
    }
    else if(e.keyCode === '4'.charCodeAt(0)) {
        cooldown1.resetAnimation(5, 10);
        cooldown1.play();
    }   
    else if(e.keyCode === '9'.charCodeAt(0)) {
        cooldown1.unlinkCanvas();
        cooldown2.unlinkCanvas();   
   
        cooldown4.setCanvas('myCanvas');
        cooldown5.setCanvas('myCanvas1');
    }       
    else if(e.keyCode === '0'.charCodeAt(0)) {  
        cooldown1.unlinkCanvas();
        cooldown2.unlinkCanvas();
    }   
}