<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid grey"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
let randomColor;
let counter = 0;
let timerId = setInterval(function(){
if (counter == 0){
randomColor = "#"+Math.floor(Math.random()*16777215).toString(16);
ctx.fillStyle = randomColor;
ctx.fillRect(0,0,250,250);
}
if (counter == 1){
randomColor = "#"+Math.floor(Math.random()*16777215).toString(16);
ctx.fillStyle = randomColor;
ctx.fillRect(250,0,250,250);
}
if (counter == 2){
randomColor = "#"+Math.floor(Math.random()*16777215).toString(16);
ctx.fillStyle = randomColor;
ctx.fillRect(0,250,250,250);
}
if (counter == 3){
randomColor = "#"+Math.floor(Math.random()*16777215).toString(16);
ctx.fillStyle = randomColor;
ctx.fillRect(250,250,250,250);
}
counter = counter + 1;
if (counter == 4){
counter = 0;
}
},1000);
</script>
</body>
</html>
| 