<canvas id="maincanvas"></canvas>

Javascript:

// init Canvas & Context
var mainCanvas=document.getElementById("maincanvas");
var ctx=mainCanvas.getContext("2d");
mainCanvas.width = 320;
mainCanvas.height = 256;

var ballpos ={ x: 0, y: 0, speed_x: 3, speed_y: 2 };

var rowsBlasterBall = new Image();
rowsBlasterBall.src="https://xtrgames.com/rowsblaster/gfx/boule4.png";

function loop() {
  // Clear Screen
  
  //ctx.clearRect(0, 0, mainCanvas.width, 100);
  
  ctx.beginPath();
  ctx.rect(0, 0, mainCanvas.width, mainCanvas.height);
  ctx.fillStyle="#000000";
  ctx.fill();
  

  ballpos.x+= ballpos.speed_x;
  if (ballpos.x >= (mainCanvas.width - rowsBlasterBall.width) || ballpos.x <= 0)  {
    ballpos.speed_x = -ballpos.speed_x; 
  }
 
  ballpos.y+= ballpos.speed_y;
  if (ballpos.y >= (mainCanvas.height - rowsBlasterBall.height) || ballpos.y <= 0)  {
    ballpos.speed_y = -ballpos.speed_y; 
  }
  
  
  ctx.drawImage(rowsBlasterBall,ballpos.x, ballpos.y);
  
  requestAnimationFrame(loop);
}

loop();

Show this example on CodePen: 
🔗 Simple Canvas Animation