Hola Marcos, espero que estés bien.
Puedes usar un for anidado para obtener este resultado, el for uno será responsable por la horizontal y el dos por la vertical, o sea, width y height.
Para sacar la posición de centro de pantalla la fórmula es:
var centroWidth = pantalla.width/2 - 50*cantidadCuadrados / 2;
var centroHeight = pantalla.height/2 - 50*cantidadCuadrados / 2;El código completo quedaría así:
<!DOCTYPE html>
<html>
<body>
<canvas width="600" height="400" />
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "gray";
pincel.fillRect(0, 0, pantalla.width, pantalla.height);
function dibujarCuadrado(x,y,w,h,color){
pincel.fillStyle = color;
pincel.beginPath();
pincel.fillRect(x, y,w,h);
pincel.strokeStyle = "black";
pincel.strokeRect(x, y,w,h);
pincel.stroke();
}
var cuadradoQueSigue = 1;
var cantidadCuadrados = 5;
for(var i=0; i < cantidadCuadrados;i++){
for(var j=0; j < cantidadCuadrados;j++){
var centroWidth = pantalla.width/2 - 50*cantidadCuadrados / 2;
var centroHeight = pantalla.height/2 - 50*cantidadCuadrados / 2;
if(cuadradoQueSigue == 1){
dibujarCuadrado(centroWidth+(50*i),centroHeight+(50*j),50,50,"yellow");
cuadradoQueSigue++;
} else if (cuadradoQueSigue == 2) {
dibujarCuadrado(centroWidth+(50*i),centroHeight+(50*j),50,50,"blue");
cuadradoQueSigue++;
} else if (cuadradoQueSigue == 3) {
dibujarCuadrado(centroWidth+(50*i),centroHeight+(50*j),50,50,"white");
cuadradoQueSigue = 1;
}
}
}
</script>
</body>
</html>Si aún le quedó dudas puedes responder en este topico.
¡Saludos!