JSFiddle - React, Tailwind, and code Playground

by nocturnesound

HTML

<canvas id="myCanvas" width="600" height="300"> </canvas>

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";

ctx.fillRect(0,0,1,20);
var count = 1;
var timerId = setInterval( function() {
    if(count != 100) {
        ctx.fillRect(0,0,count,20);
        //ctx.strokeText(""+count+"", 20, 100);
        count++;
    } else {
        ctx.strokeText("100%", 102, 12);
        alert('Done!');
        clearInterval(timerId); // exit timer
    }    
}, 100);