Como faço para deslocar meus quadrados?

function desenhaQuadrado(x, y, tamanho, cor) {

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho)
        pincel.fill();
    }



    function desenhaPaletaDeCores() {

        desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, 'red');
        desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, 'green');
        desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, 'blue');

    }



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



    var xVermelho = 0;
    var xVerde  = 50;
    var xAzul = 100;
    var yQuadrados = 0;
    var tamanhoQuadrados = 50;

    //desenhaPaletaDeCores(); // mostra os quadrados de seleção de cores

 function limpaTela() {

    pincel.clearRect(0, 0, 600, 400);
}

  var x = 150;

   var sentido = 1;

   function atualizaTela() {

       limpaTela();

       if( x > 600) {
           sentido = -1
       } else if (x < 0) {
           sentido = 1;
       } 

       desenhaPaletaDeCores();
        x = x + sentido;
   }

   setInterval(atualizaTela, 10);