Minha implementação!

Pessoal, Eu pensei no caso de a pessoas querer posicionar a paleta de cores em qualquer posição da tela. Então deixei os limites de não desenho variáveis. Posicionamento da paleta variáveis também. Olha como ficou.

<canvas></canvas>
<script>
  const tela = document.querySelector('canvas')
  const pincel = tela.getContext('2d')

  const width = 600
  const height = 400
  tela.setAttribute('width', width)
  tela.setAttribute('height', height)

  pincel.fillStyle = 'lightgrey'
  pincel.fillRect(0, 0, width, height)

  //variáveis
  var desenha = false
  var yQuadrados = 10
  var tamanhoQuadrados = 50
  var xVermelho = 10
  var xVerde = xVermelho + tamanhoQuadrados
  var xAzul = xVerde + tamanhoQuadrados
  var corAtual = 'blue'

  //desenhar quadrado
  function desenharQuadrado(x, y, tamanho, cor) {
    pincel.fillStyle = cor
    pincel.fillRect(x, y, tamanho, tamanho)
  }

  //desenhar círculo
  function desenharCirculo(x, y, raio, cor) {
    pincel.fillStyle = cor
    pincel.beginPath()
    pincel.arc(x, y, raio, 0, 2 * Math.PI)
    pincel.fill()
  }

  //paleta de cores
  function desenharPaleta() {
    desenharQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, 'red')
    desenharQuadrado(xVerde, yQuadrados, tamanhoQuadrados, 'green')
    desenharQuadrado(xAzul, yQuadrados, tamanhoQuadrados, 'blue')
  }

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

    if (desenha && limitarAreaDesenho(x, y)) {
      desenharCirculo(x, y, 5, corAtual)
    }
  }

  function limitarAreaDesenho(x, y) {
    if (
      y >= yQuadrados - 5 &&
      y <= yQuadrados + tamanhoQuadrados + 5 &&
      x < xAzul + tamanhoQuadrados + 5 &&
      x > xVermelho - 5
    )
      return false
    else return true
  }

  function selecionarCor(evento) {
    let x = evento.pageX - tela.offsetLeft
    let y = evento.pageY - tela.offsetTop
    let areaClickMin = [0, 0]
    let areaClickMax = [tamanhoQuadrados * 3, tamanhoQuadrados]
    if (y <= areaClickMax[1] && y > yQuadrados) {
      if (x <= tamanhoQuadrados && x >= xVermelho) corAtual = 'red'
      else if (x <= 2 * tamanhoQuadrados) corAtual = 'green'
      else if (x <= areaClickMax[0]) corAtual = 'blue'
    }
  }

  function habilitarDesenho() {
    desenha = true
  }

  function desabilitarDesenho() {
    desenha = false
  }

  desenharPaleta()

  tela.onclick = selecionarCor
  tela.onmousemove = desenhaComMovimento
  tela.onmousedown = habilitarDesenho
  tela.onmouseup = desabilitarDesenho
</script>