quadrado preto.

<canvas width="600" height="400"></canvas>
<script>


function desenhaQuadrado(x, y, tamanho, cor) {

var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");

pincel.fillStyle = cor;
pincel.fillRect(x, y, tamanho, tamanho);
pincel.strokeStyle = "black";
pincel.strokeRect(x, y, tamanho, tamanho);
}
/*
desenhaQuadrado(50, 50, 100, "grenn");
desenhaQuadrado(150, 50, 100, "green");
desenhaQuadrado(250, 50, 100, "green");
*/
var x = 0
for ( var x = 0; x <= 300; x = x + 50){
desenhaQuadrado(x, 50, 50, "green");
}

desenhaQuadrado(350, 50, 100, "white");

</script>

o código funciona , mas um dos quadrados esta preto ou faz varios quadradinhos verdes, não consigo achar o erro.

<canvas width="600" height="400"></canvas>
<script>

function desenhaQuadrado(x, y, tamanho, cor) {

var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");

pincel.fillStyle = cor;
pincel.fillRect(x, y, tamanho, tamanho);
pincel.strokeStyle = "black";
pincel.strokeRect(x, y, tamanho, tamanho);
}

var x = 0
var y = 0
var cor = ["red", "orange", "yellow", "green", "blue", "darkblue", "violet"];
for ( var x = 0; x <= 300; x = x + 50){
    desenhaQuadrado(x, 50, 50, cor[y]);
    y++;
}

desenhaQuadrado(350, 50, 100, "white");

</script>