enviei o código anterior errado, desculpe. o códio certo é esse aqui. onde desenho três quadrados com msm tamanho, queria fazer com que o desenho fosse até o final do canvas e voltasse.
  
  
  
  
  
  
// código do JS abaixo:
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);