• HTML
• CSS
• JS

HTML

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

CSS

canvas{
    background:white;
    border:1px solid #839192;
}

JS

// Definiendo canvas en 2d
var canvas = document.getElementById('lienzo');
var ctx    = canvas.getContext('2d');

// Medidas necesarias
var x=0;
var y=0;
var tamano=50;
var xdir=4;
var ydir=4;

// Dibuja el objeto
function dibujar(){
    
    // Primero limpiamos la pantalla
    ctx.clearRect(0,0,canvas.width,canvas.height);
    
    // Definimos la posición,tamaño y color del objeto
    ctx.fillRect(x,y,tamano,tamano);
    ctx.fillStyle = "rgb(243, 156, 18)";
}

function frame(){
    
    dibujar();
    
    x+=xdir;
    y+=ydir;
    
    // si el objeto sobrepasara los límites del canvas,
    // cambiamos la orientación
    
    if(x<=0||x>=580) xdir*=-1;
    if(y<=0||y>=380) ydir*=-1;
    
    setTimeout("frame()",20);
    
}

// Ejecutamos la función
frame();