Fração controlada por quantidade de quadrados

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

<script>
var preenchido=true;
    function desenhaQuadrado(x,y,cor) {

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

        pincel.fillStyle = cor;
        if (preenchido==true) {
        pincel.fillRect(x, y, 50, 50);    
        }
        pincel.strokeStyle = 'red'; //Dá cor à borda
        pincel.strokeRect(x, y, 50, 50); //Cria a borda quadrada

 }
 function designQuadrado(z,k,tamanho,acor) {
         var desloc = z;
        for(var t=1;t<=tamanho;t++){
        desenhaQuadrado(desloc,k,acor);
        desloc = desloc+z+1;
        if (t==tamanho-1){preenchido=false}
    }    
}
//                x  y  4 quadrados  e cor
designQuadrado(50,100,4,"blue");


</script>