var elem=document.getElementById("myCanvas");
var ctx=elem.getContext("2d");
ctx.fillStyle = '#2E64FE';
ctx.strokeStyle = '#0B0B61';
ctx.lineWidth = 0.5;
for (var i=0;i<=7;i++)
    {
        if (i%2==0)
    {
        ctx.fillStyle = 'white';
    } else
    {
        ctx.fillStyle = 'green';
    }
        ctx.fillRect(i*40,0,40,40);
        ctx.strokeRect(i*40,0,40,40);
    }
for (var i=0;i<=7;i++)
    {
        if (i%2==0)
    {
        ctx.fillStyle = 'green';
    } else
    {
        ctx.fillStyle = 'white';
    }
        ctx.fillRect(i*40,40,40,40);
        ctx.strokeRect(i*40,40,40,40);
    }
  for (var i=0;i<=7;i++)
    {
        if (i%2==0)
    {
        ctx.fillStyle = 'white';
    } else
    {
        ctx.fillStyle = 'green';
    }
        ctx.fillRect(i*40,80,40,40);
        ctx.strokeRect(i*40,80,40,40);
    }
for (var i=0;i<=7;i++)
    {
        if (i%2==0)
    {
        ctx.fillStyle = 'green';
    } else
    {
        ctx.fillStyle = 'white';
    }
        ctx.fillRect(i*40,120,40,40);
        ctx.strokeRect(i*40,120,40,40);
    }
  for (var i=0;i<=7;i++)
    {
        if (i%2==0)
    {
        ctx.fillStyle = 'white';
    } else
    {
        ctx.fillStyle = 'green';
    }
        ctx.fillRect(i*40,160,40,40);
        ctx.strokeRect(i*40,160,40,40);
    }
for (var i=0;i<=7;i++)
    {
        if (i%2==0)
    {
        ctx.fillStyle = 'green';
    } else
    {
        ctx.fillStyle = 'white';
    }
        ctx.fillRect(i*40,200, 40,40);
        ctx.strokeRect(i*40,200,40,40);
    }
  for (var i=0;i<=7;i++)
    {
        if (i%2==0)
    {
        ctx.fillStyle = 'white';
    } else
    {
        ctx.fillStyle = 'green';
    }
        ctx.fillRect(i*40,240,40,40);
        ctx.strokeRect(i*40,240,40,40);
    }
for (var i=0;i<=7;i++)
    {
        if (i%2==0)
    {
        ctx.fillStyle = 'green';
    } else
    {
        ctx.fillStyle = 'white';
    }
        ctx.fillRect(i*40,280,40,40);
        ctx.strokeRect(i*40,280,40,40);
    }

for (var i=0;i<=7;i++)
    {
        if (i%2!=0)
    {
       ctx.beginPath();
            ctx.arc((i * 40) + 20,20,15,0,2*Math.PI);
      ctx.fillStyle = 'purple'
      ctx.fill();
            ctx.stroke();
    }

    }
    for (var i=0;i<=7;i++)
    {
        if (i%2==0)
    {
       ctx.beginPath();
            ctx.arc((i * 40) + 20,60,15,0,2*Math.PI);
      ctx.fillStyle = 'purple'
      ctx.fill();
            ctx.stroke();
    }
    }
    for (var i=0;i<=7;i++)
    {
        if (i%2!=0)
    {
       ctx.beginPath();
            ctx.arc((i * 40) + 20,100,15,0,2*Math.PI);
      ctx.fillStyle = 'purple'
      ctx.fill();
            ctx.stroke();
    }
    }
    for (var i=0;i<=7;i++)
    {
        if (i%2==0)
    {
       ctx.beginPath();
            ctx.arc((i * 40) + 20,220,15,0,2*Math.PI);
      ctx.fillStyle = 'blue'
      ctx.fill();
            ctx.stroke();
    }
    }
    for (var i=0;i<=7;i++)
    {
        if (i%2!=0)
    {
       ctx.beginPath();
            ctx.arc((i * 40) + 20,260,15,0,2*Math.PI);
      ctx.fillStyle = 'blue'
      ctx.fill();
            ctx.stroke();
    }
    }
    for (var i=0;i<=7;i++)
    {
        if (i%2==0)
    {
       ctx.beginPath();
            ctx.arc((i * 40) + 20,300,15,0,2*Math.PI);
      ctx.fillStyle = 'blue'
      ctx.fill();
            ctx.stroke();
    }
    }