En el segundo ejercicio no estás pintando cuadrados.
Estás pintando líneas, que al cruzarse simulan cuadrados.
No puedes rellenarlos, porque no existen.
Prueba esto:
Código:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="600" style="border:1px solid #CECECE;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "rgb(255,255,255)";
var grado=15;
for(x=0;x<16;x++) {
ctx.fillStyle = 'rgb('+x*grado+',0,0)'; // Voy haciendo por cada cuadro un gradiente
ctx.fillRect(x*50, 0, 50, 50); // Voy creando cuadros en una lina de 50x50
}
</script>
</body>
</html>
Y un tablero de ajedrez seria (por supuesto, el codigo es mejorable):
Código:
for(y=0;y<8;y++) {
for(x=0;x<8;x++) {
if(y%2==0) {
if(x%2==0) {
ctx.fillStyle = 'rgb(0,0,0)';
} else {
ctx.fillStyle = 'rgb(255,255,255)';
}
} else {
if(x%2==0) {
ctx.fillStyle = 'rgb(255,255,255)';
} else {
ctx.fillStyle = 'rgb(0,0,0)';
}
}
ctx.fillRect(x*50, y*50, 50, 50);
}
}