I am working on a fun project that involves alternating between two images, one green and the other black. Here is the code snippet:
<script>
var switchImage = 1;
var delayTime = 500;
switchImages()
function switchImages() {
if (switchImage == 1)
{switchImage = 2; drawGreen();}
else {switchImage = 1; drawBlack();}
delayTime += 500;
setTimeout(switchImages(), delayTime)
}
function drawGreen() {
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath();
context.arc(438,398,125,0,2*Math.PI);
context.arc(838,398,125,0,2*Math.PI);
context.fillStyle="#00ff00";
context.fill();
}
function drawBlack() {
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath();
context.arc(438,398,128,0,2*Math.PI);
context.arc(838,398,128,0,2*Math.PI);
context.fillStyle="#000000";
context.fill();
}
</script>
Adding an alert after incrementing the delay works fine, but I want it to happen automatically without clicking. Any suggestions would be greatly appreciated.