let canvas = document.querySelector(".canvas");
let ctx = canvas.getContext("2d");
let size = 30;
function draw() {
  for (y = 1; y <= 20; y++) {
    for (x = 1; x <= 20; x++) {
     let rect = ctx.rect(x * size, y * size, size, size);
     let isEven = y%2==0;

     if (x % 2 === 0) {
        ctx.fillStyle = isEven? "gray":"white";
      } else {
        ctx.fillStyle = isEven?"white":"gray";
      }
      ctx.fillRect(x*size, y*size, size, size);
    }
  }
  ctx.strokeStyle = "black";
  ctx.lineWidth = 0.75;
  ctx.stroke();
}
draw();

<canvas class="canvas" height="1000px" width="1000px"></canvas>

function draw(){

    for(y = 0; y < 20; y++){
        for(x = 0; x < 20; x++){
         rect = ctx.rect(x*30, y*30, 30, 30)
            
        }
    }
   
    ctx.strokeStyle = "black";
    ctx.lineWidth = 0.75;
    ctx.stroke();  
 

    for(y = 0; y < 20; y+=2){
        for(x = 0; x < 20; x+=2){
         rect = ctx.rect(x*30, y*30, 30, 30)
         ctx.fillStyle="gray";
         ctx.fillRect(x*size, y*size, size, size);
        }
    }
    
}   
    draw();