SOURCE

function draw(){
    const ctx = document.getElementById('canvas').getContext('2d')
    ctx.fillStyle = "#f0be76"
    ctx.fillRect(0,0,1000,1000);
    for(let i=1; i<20; i++){
        ctx.beginPath()
        ctx.moveTo(i*50,50)
        ctx.lineTo(i*50, 950)
        ctx.stroke()
        ctx.closePath()
        ctx.beginPath()
        ctx.moveTo(50, i*50)
        ctx.lineTo(950, i*50)
        ctx.stroke()
        ctx.closePath()
    }
    const timer = setInterval(()=>{
        play(ctx)
    }, 3000)
}

let num = 0;

function play(ctx){
    const x = Math.floor(Math.random()*10)*50+50
    const y = Math.floor(Math.random()*10)*50+50
    ctx.beginPath()
    ctx.moveTo(x,y)
    if(num%2===0){
        ctx.fillStyle = '#fff'
    }else{
        ctx.fillStyle = '#000'
    }
    ctx.arc(x,y,10,0,Math.PI*2)
    ctx.fill();
    ctx.closePath()
    num++;
}

draw()

<canvas id="canvas" width="1000" height="1000"></canvas>