JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="500" height="500"></canvas>

JavaScript

var wis = 1;
var delay = 500;
wissel()

function wissel() {
    if (wis == 1) {
        wis = 2;
        green();
    } else {
        wis = 1;
        black();
    }
    delay = delay + 500;
    setTimeout(wissel, delay)
}

function green() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(438, 398, 125, 0, 2 * Math.PI);
    ctx.arc(838, 398, 125, 0, 2 * Math.PI);
    ctx.fillStyle = "#00ff00";
    ctx.fill();
}

function black() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(438, 398, 128, 0, 2 * Math.PI);
    ctx.arc(838, 398, 128, 0, 2 * Math.PI);
    ctx.fillStyle = "#000000";
    ctx.fill();
}