loading-progress.html

<!DOCTYPE html>
<html>
	<head>
		<title>Loading Progress - Canvas Excersice</title>
		<style>
		* {
			padding: 0px;
			margin: 0px;
		}
		canvas {
			border: 1px solid gray;
			background: black;
		}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<script>
		var loading;
		var game = {
			canvas: document.querySelector("#canvas"),
			start: function() {
				this.canvas.width = 500;
				this.canvas.height = 300;
				this.context = this.canvas.getContext("2d");
				this.interval = setInterval(update, 20);
			},
			clear: function() {
				this.context.fillStyle = '#ff6';
				this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
				// this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
			}
		}
		function shape(width, height, color, x, y) {
			this.width = width;
			this.height = height;
			this.x = x;
			this.y = y;
			this.update = function(){
				game.context.fillStyle = color;
				game.context.fillRect(this.x, this.y, this.width, this.height);
			}
		}
		function start() {
			loading = new shape(10, 10, "yellow", 0, 280);
			game.start();
		}
		function update() {
			if(loading.x > 470) {
				game.clear();
				return;
			}
			loading.x += 15;
			loading.update();
		}
		window.addEventListener("load", function() {
			start();
		});
		</script>
	</body>
</html>