The canvas with several moved circles.

index.html

<canvas id="canvas" style="border: 1px solid black"></canvas>
<script>

setup(); loop(); setInterval(loop, 10);

/////////////////////////////////////////////////	

var canvas, context, objects;

/////////////////////////////////////////////////

function setup () {
	canvas = document.getElementById('canvas');
	context = canvas.getContext('2d');

	canvas.width = canvas.height = 700;

	objects = [];
	for (var i = 0; i < 10; i++)
		objects.push(new Circle({
			x: 100 + 50 * i,
			y: 100 + 50 * i,
			r: 5 + 2 * i,
			moveRule: rule
		}));
}

/////////////////////////////////////////////////

function loop () {
	clearCanvas();
	objectsMove();
	drawObjects();
}

/////////////////////////////////////////////////

function rule (t) {
	this.x += 3 * Math.cos(t * Math.PI / 180);
	this.y += 3 * Math.sin(t * Math.PI / 180);
}

function objectsMove () {
	objects.forEach(function (obj) { obj.move(); });
}

function drawObjects () {
	objects.forEach(function (obj) { obj.draw(); });
}

function clearCanvas () {
	canvas.width = canvas.width;
}

/////////////////////////////////////////////////


function Circle (_param_) {

	var __circle = {};
	var t = 0;

	//////////////////

	__circle.x = _param_.x ? _param_.x : 100;
	__circle.y = _param_.y ? _param_.y : 100;
	__circle.r = _param_.r ? _param_.r : 5;

	//////////////////

	__circle.draw = draw;
	__circle.move = move;
	__circle.rule = _param_.moveRule ? _param_.moveRule : rule;

	//////////////////

	return __circle;

	//////////////////

	function draw () {
		context.beginPath();
		context.arc(__circle.x, __circle.y, __circle.r, 0, Math.PI * 2);
		context.stroke();
		context.fill();
	}

	function rule (t) {
		return t;
	}

	function move () {
		t += Math.floor(Math.random() * 10);
		if (++t > 360) t = 0;
		__circle.rule(t);
	}
}


</script>