[Sugestão] 09: Frações - Minha solução

Eu tentei automatizar a criação de quadrados com bordas e tentei criar 3 quadrados com fundo verde + 1 sem cor de fundo aplicando o if kkkkk pode ter ficado um pouco complexo mas estou contente de que tentei modificar o código. No final deu o mesmo resultado kkkk

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

  function desenharQuadrado(borda, cor, x, y, larg, altu) {
    pincel.fillStyle = cor;
    var forma = pincel.fillRect(x, y, larg, altu);

    //caso coloquemos o valor de "borda" em string, no parâmetro de "borda", criará uma borda
    if (borda === "borda") {

      //criando uma função de cria uma borda no elemento
      function borda() {
        pincel.strokeStyle = "black";
        pincel.strokeRect(x, y, larg, altu);
      }

      //aplicando a borda
      borda();
    } else {
      //retornar o elemento sem borda 
      return forma;
    }
  }

  function escreverTexto(cor, texto, x, y) {
    pincel.font = "20px Georgia";
    pincel.fillStyle = cor;
    return pincel.fillText(texto, x, y);
  }

  desenharQuadrado(false, "rgba(0,0,0,0.1)", 0, 0, 600, 400);

  escreverTexto("black", "Qual é a fração? ", 0, 30);

// aqui estou dando um jeito de criar 3 elementos com fundo preenchido 
  for (var margin = 0; margin < tela.width - 400; margin = margin + 50) {
    desenharQuadrado("borda", "darkgreen", margin, 50, 50, 50);

    //criando um elemento com o fundo branco igual a imagem
    if (margin == 150) {
      desenharQuadrado("borda", "white", margin, 50, 50, 50);
    }
  }

`