text: // Função para criar botão
  function criarBotao(idBotao, i) {
      let botao = document.createElement('input');
      botao.setAttribute('type', 'button');
      botao.setAttribute('id', idBotao);
      botao.setAttribute('value', idBotao);
      botao.style.width = "41px";
      botao.style.height = "41px";
      botao.style.color = "#cc0";
      botao.style.background = "#fff";
      botao.onclick = function () { clique(this.id) };
      document.getElementById(i).appendChild(botao);
  }
  
  // Função para eixo x e y
  function xy() {
      let temp = -10;
      for (let i = -10; i <= 10; i++) {
          string_idX = i + ',0';
          document.getElementById(string_idX).setAttribute('value', temp);
          document.getElementById(string_idX).style.color = "#00f";
          string_idY = '0,' + i;
          document.getElementById(string_idY).setAttribute('value', temp);
          document.getElementById(string_idY).style.color = "#00f";
          temp += 1;
      }
  }
  
  // Função criar todos os botões na tela
  function criarBotoesTela(id) {
      id_Y = 10;
      for (let i = 0; i < 21; i++) {
          id_X = -10;
          for (let j = 0; j < 21; j++) {
              string_id = id_X + "," + id_Y;
              criarBotao(string_id, id);
              id_X = id_X + 1;
          }
          id_Y = id_Y - 1;
      }
      xy();
  }
  
  clicou = 1;
  id_primeiro_click = '';
  
  function clique(id) {
      console.log(document.getElementById(id).style.backgroundColor);
      if (clicou == 1) {
          id_primeiro_click = id;
          clicou = 0;
          bresenham(0, 0, 10);
      }
      else {
          if (id != id_primeiro_click) {
              clicou = 1;
              let timeStart = performance.now();
              flood_fill(pegarValorX(id), pegarValorY(id));
              console.log("Quantidade chamadas recursão função = " + cont);
              let timeEnd = performance.now();
              console.log("Tempo de execução = " + (timeEnd - timeStart) + " ms . . .");
          }
      }
  }
  
  function pegarValorX(i) {
      resultado = i.split(",");
      return parseInt(resultado[0]);
  }
  
  function pegarValorY(i) {
      resultado = i.split(",");
      return parseInt(resultado[1]);
  }
  
  function mostrarPixelTela(x, y, cor) {
      id = x + ',' + y;
      document.getElementById(id).style.backgroundColor = cor;
  }
  
  function bresenham(valorInicialX, valorInicialY, raio) {
      x = 0;
      y = raio;
      p = 1 - raio;
      while (x <= y) {
          mostrarPixelTela(valorInicialX + x, valorInicialY + y, "#000");
          mostrarPixelTela(valorInicialX + x, valorInicialY - y, "#000");
          mostrarPixelTela(valorInicialX - x, valorInicialY + y, "#000");
          mostrarPixelTela(valorInicialX - x, valorInicialY - y, "#000");
          mostrarPixelTela(valorInicialX + y, valorInicialY + x, "#000");
          mostrarPixelTela(valorInicialX + y, valorInicialY - x, "#000");
          mostrarPixelTela(valorInicialX - y, valorInicialY - x, "#000");
          mostrarPixelTela(valorInicialX - y, valorInicialY + x, "#000");
          if (p >= 0) {
              y = y - 1;
              p = p + (2 * x) - (2 * y) + 5;
              x = x + 1;
          }
          else {
              p = p + (2 * x) + 3;
              x = x + 1;
          }
      }
  }
  
  let cont = 0
  function flood_fill(valorInicialX, valorInicialY) {
      cont++;
      id = valorInicialX + ',' + valorInicialY;
      if (document.getElementById(id).style.backgroundColor == "rgb(255, 255, 255)") {
          mostrarPixelTela(valorInicialX, valorInicialY, "#0af");
          flood_fill(valorInicialX + 1, valorInicialY);
          flood_fill(valorInicialX, valorInicialY + 1);
          flood_fill(valorInicialX - 1, valorInicialY);
          flood_fill(valorInicialX, valorInicialY - 1);
      }
  }