Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

function drawRectangle(rectangle, context) {
		context.beginPath();
		context.rect(rectangle.x, rectangle.y, rectangle.width,
				rectangle.height);
		context.fillStyle = 'red';
		context.fill();
		context.lineWidth = rectangle.borderWidth;
		context.strokeStyle = 'black';
		context.stroke();
	};
	function animate(rectangle, canvas, context, startTime) {

		var time = (new Date()).getTime() - startTime;

		var linearSpeed = 100;

		var newX = linearSpeed * time / 1000;

		if (newX < canvas.width - rectangle.width
				- rectangle.borderWidth / 2) {
			rectangle.x = newX;
		}

		context.clearRect(0, 0, canvas.width, canvas.height);

		drawRectangle(rectangle, context);				
	};
	var cv = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');

	var rectangle = {
		x : 0,
		y : 75,
		width : 100,
		height : 50,
		borderWidth : 2
	};

	drawRectangle(rectangle, ctx);
	var startTime = (new Date()).getTime();
	setInterval(function() {
		
		animate(rectangle, cv, ctx, startTime);
	}, 50);