无限的Javascript动画代码与计时器

Question

我有一个代码，其中画布中的形状不断变换颜色，但我不知道如何动画它，我的代码使它只有当你刷新它的颜色更改，我通过脚本添加动态添加的画布，这是我的脚本：

   mycanvas = document.getElementById("mycanvas");
var clr=["red", "blue", "green", "yellow"];
var ctx = canvas.getContext("2d");
ctx.fillStyle=clr[Math.floor((Math.random() * 4) + 0)];
ctx.fillRect(300,250,150,250);
ctx.fillStyle=clr[Math.floor((Math.random() * 4) + 0)];
ctx.fillRect(700,250,150,250);
ctx.fillStyle=clr[Math.floor((Math.random() * 4) + 0)];
ctx.fillRect(1100,250,150,250);
ctx.beginPath();
ctx.moveTo(300,500);
ctx.lineTo(1250,500);
ctx.lineTo(1450,720);
ctx.lineTo(100,720);
ctx.closePath();
ctx.fillStyle=clr[Math.floor((Math.random() * 3) + 0)];;
ctx.fill();
ctx.strokeStyle=clr[Math.floor((Math.random() * 3) + 0)];;
ctx.stroke();