• HTML
• CSS
• JS

HTML

 <canvas width="400" height="400"  id="rebote"></canvas>

CSS

canvas{
    background:#fff;
    border:1px solid #17a589;
}

JS

// Dibuja el objeto
dibujar = function(obj, ctx){
     ctx.fillRect (obj.x, obj.y, obj.width, obj.height);
 }
 
// Limpia la pantalla
limpiar = function(ctx){
     ctx.clearRect(0,0,400,400)
 } 
 
 window.onload = function(){
     
     // Definiendo canvas en 2d
     var canvas = document.getElementById('rebote');
     var ctx    = canvas.getContext('2d');
     
     // Color del objeto
     ctx.fillStyle = "rgb(231, 76, 60)";
     
     // config la rapidez del objeto
     var rap = 0.9;
     
     // Posisión de inicio  y tamaño
     var obj = {x:1,y:20,width:30,height:30};
     
     //Utilizamos setInterval para hacer iteraciones de 1 milesegundos
     setInterval(function(){
         
         // si el objeto sobrepasara los límites del canvas,
         // cambiamos la orientación
         
         if(obj.x >= 370 || obj.x < 0){
             rap = -rap;
         }
         
         //Sumamos 0.9 a la posión en X 
         obj.x += rap;
         
         limpiar(ctx);
         dibujar(obj,ctx);
         
         },1);
     
 }