Flags inspired by Bridget Riley

Movement in Squares

For each of the first 16 columns the width is 90% of the previous. This pattern is reversed for the remainder. There are 31 columns.

function drawFlag(ctx)
{
  ctx.fillStyle = 'white';
  ctx.fillRect(0,0,240,240);
  ctx.fillStyle = 'black';
  for(let y=0;y<12;y++){
    for(let x=0;x<31;x++){
       if ((x+y)%2==1){
         ctx.fillRect(240*x/24,240*y/12,240/24,240/12);
       }
    }
  }
}  

function drawFlag(ctx)
{
  ctx.fillStyle = 'white';
  ctx.fillRect(0,0,240,240);
  ctx.fillStyle = 'black';
  let a = 0;
  let w = 240/12;
  for(let x=0;x<31;x++){
    for(let y=0;y<12;y++){
       if ((x+y)%2==1){
         ctx.fillRect(a,240*y/12,w,240/12);
       }
    }
    a += w;
    if (x<16){
      w *= 0.9;
    }else{
      w *= 1/0.9;
    }
  }
}