JSFiddle - React, Tailwind, and code Playground

by Eugen Sunic

HTML

<body>
<button id="start"onclick="">Start animation</button>
<button id="stop"onclick="">Stop animation</button>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>


</body>
</html>

JavaScript

var color = ['red', 'green', 'blue', 'orange', 'yellow'];     
   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");
var timer;
function changingColor(){   

  
    var posicion = 0;    
    var tamano = 0;

    timer=setInterval(function () {

    ctx.clearRect(0, 0, 400, 400);
    ctx.fillRect(posicion, 0, tamano, 400-tamano);

    posicion++;
    tamano++;

    if (posicion > 400){
    posicion = 0;
    tamano = 0;
          ctx.fillStyle = color[Math.floor(Math.random() * color.length)];
    }
    }, 10);    

   
 }
$("#start").on( "click", function() {
 changingColor();
});
$("#stop").on( "click", function() {
   window.clearInterval(timer)
   ctx.clearRect(0, 0, 400, 400);
});