Untitled

<HTML>
  <BODY STYLE="padding:0; margin:0; background-color:#000">
  <CANVAS ID="myCanvas" WIDTH="1920" HEIGHT="1080" STYLE="margin:0; padding:0; width:100%; height:100%;"></CANVAS>

  <SCRIPT>
    var c = document.getElementById("myCanvas");
    c.width = window.innerWidth;
    c.height = window.innerHeight;

    var ctx = c.getContext("2d");
    ctx.fillStyle = "#F00";
    ctx.fillRect(0,0,c.width,c.height);
    var ctxCopy= ctx.getImageData(0,0,c.width,c.height);

    var start = new Date();
    var end = new Date('2016-08-30');
    var diff = end - start;

    var prog = 0, oldProg = 0, progRows = 0, oldProgRows = 0;


    var timer = setInterval("updateGraph()", 1000);

    function updateGraph(){
      c.width = window.innerWidth;
      c.height = window.innerHeight;

      var now = new Date();

      if (now >= end){
        ctx.fillStyle = "#0F0";
        ctx.fillRect(0,0,c.width,c.height);
      }

      else if(end < start || now < start){
        ctx.fillStyle = "#F00";
        ctx.fillRect(0,0,c.width,c.height);
      }

      else {
        oldProg = prog;
        oldProgRows = progRows;

        prog = (c.width * c.height * (now - start)) / diff;
        progRows = Math.floor(prog / c.width);

        ctxCopy= ctx.getImageData(0,0,c.width,c.height);

        ctx.fillStyle = "#F00";
        ctx.fillRect(0, 0, c.width, c.height);

        ctx.fillStyle = "#00F";
        ctx.fillRect(0, 0, c.width, progRows);
        ctx.fillRect(0, progRows, (prog - (progRows * c.width)), 1);

        ctx.fillStyle = "#0F0";
        ctx.fillRect(0, 0, c.width, oldProgRows);
        ctx.fillRect(0, oldProgRows, (oldProg - (oldProgRows * c.width)), 1);

        setTimeout(function(){
          ctx.fillRect(0, 0, c.width, progRows);
          ctx.fillRect(0, progRows, (prog - (progRows * c.width)), 1);
        }, 500);
      }
    }

  </SCRIPT>

  </BODY>
</HTML>