// get the canvas element
var canvas = document.getElementById('canvas-1');
// get a context to draw in
var ctx = canvas.getContext('2d');
function tick() {
// this is the only real tweak on the previous
// example: instead of totally resetting the previous
// frame, we only fade it out by drawing translucent
// white over it
ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
// clear what was drawn in the previous frame
ctx.fillRect(0, 0, 600, 100);
// now draw an opaque circle
ctx.fillStyle = '#000';
// begin a new path: arc is a line instruction like lineTo
ctx.beginPath();
// define the circle: position according to time, 50px radius
ctx.arc((Math.sin(Date.now() / 1000) + 1) * 250 + 50,
50 + Math.sin(Date.now() / 100) * 10,
20, 0, 2 * Math.PI);
// draw the circle
ctx.fill();
// request a chance to draw the circle again as soon as possible
requestAnimationFrame(tick);
}
tick();
<canvas width=600 height=100 id='canvas-1'></canvas>