[Dúvida] Trocando cores com Arrays

Bom dia pessoal, estou tentando resolver este desafio final com arrays, porém estou com dificuldades, alguém poderia me dar dicas de como solucionar?

<meta charset="UTF-8">

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

<script>
  function desenhaQuadrado(x, y, tamanho, cor) {
    pincel.fillStyle = cor;
    pincel.fillRect(x, y, tamanho, tamanho);
    pincel.fill();
  }

  function desenhaCirculo(x, y, raio, cor) {
    pincel.fillStyle = cor;
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2 * Math.PI);
    pincel.fill();
  }

  function desenhaPaletaDeCores() {
    desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, coresAtuais[0]);
    desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, coresAtuais[1]);
    desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, coresAtuais[2]);
  }

  function lidaComMovimentoDoMouse(evento) {
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

    if (desenha) {
      if ((x > xVermelho - tamanhoQuadrados) && (x < xVermelho + tamanhoQuadrados) && (y > yQuadrados - tamanhoQuadrados) && (y < yQuadrados + tamanhoQuadrados)) {
        desenhaCirculo(x, y, 5, coresAtuais[0]);
      }
      else if ((x > xVerde - tamanhoQuadrados) && (x < xVerde + tamanhoQuadrados) && (y > yQuadrados - tamanhoQuadrados) && (y < yQuadrados + tamanhoQuadrados)) {
        desenhaCirculo(x, y, 5, coresAtuais[1]);
      }
      else if ((x > xAzul - tamanhoQuadrados) && (x < xAzul + tamanhoQuadrados) && (y > yQuadrados - tamanhoQuadrados) && (y < yQuadrados + tamanhoQuadrados)) {
        desenhaCirculo(x, y, 5, coresAtuais[2]);
      }
    }
  }

  function habilitaDesenhar() {
    desenha = true;
  }

  function desabilitaDesenhar() {
    desenha = false;
  }

  var tela = document.querySelector("canvas");
  var pincel = tela.getContext("2d");
  pincel.fillStyle = "lightgray";
  pincel.fillRect(0, 0, 600, 400);

  var desenha = false;
  var coresAtuais = ['red', 'green', 'blue'];
  var xVermelho = 0;
  var xVerde = 50;
  var xAzul = 100;
  var yQuadrados = 0;
  var tamanhoQuadrados = 50;

  desenhaPaletaDeCores();

  tela.onmousemove = lidaComMovimentoDoMouse;

  tela.onmousedown = habilitaDesenhar;

  tela.onmousetop = desabilitaDesenhar;

</script>