Video Play With Timer of 6 seconds

This is a canvas to show play animation for 6.6 seconds before next video plays.

by Piara Singh

HTML

<canvas id="myCanvas" width="250" height="250"></canvas>

CSS

body {
       margin: 0px;
       padding: 0px;
       background: #f1ecec;
   }

JavaScript

(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
}());

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var circles = [];

createCircle(100, 100, 'play', function () {
    console.log('i am done');
});



function createCircle(x, y, text, callback) {
    var radius = 75;
    var endPercent = 100;
    var curPerc = 0;
    var counterClockwise = true;
    var circ = Math.PI * 2;
    var quart = Math.PI / 2;

    context.lineWidth = 10;
    context.strokeStyle = '#ad2323';
    context.shadowOffsetX = 0;
    context.shadowOffsetY = 0;
    context.shadowBlur = 10;
    context.shadowColor = '#656565';
    

    function doText(context, x, y, text) {
        context.lineWidth = 1;
        context.fillStyle = "#ad2323";
        context.lineStyle = "#ad2323";
        context.font = "28px sans-serif";
        context.fillText(text, x - 55, y + 5);
    }
    
    var sec = 0;

    function animate(current) {
        context.lineWidth = 10;
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.lineCap = "round";
        context.lineJoin = 'round'
        context.beginPath();
        context.moveTo(80,80);
        context.lineTo(125,120);
        context.lineTo(80,160);
        context.closePath();
        context.stroke();
        context.beginPath();
				
        context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
        context.stroke();
        if(Math.ceil(curPerc)%7 === 0){      	
        	sec++;
	        //doText(context, x, y, text + ' : ' + sec);
        }
        curPerc+=0.33;
        if (curPerc <= endPercent) {
            requestAnimationFrame(function () {
                animate(curPerc / 100)
            });
        } else {
            if (callback) callback.call();
        }
    }
   ...