window.addEventListener("load",function(){
	var canvas = document.getElementById("canvas");
	var context = canvas.getContext("2d");
	var posX = 0;
	var posY = 0;
	var speedX = 1;
	var speedY = 1;
	var padLeft = 200;
	var padRight = 200;

	setInterval(loop,5);

	window.addEventListener("keydown",function(e){
		console.log(e.keyCode);
		if(e.keyCode == 40){
			padRight += 6;
		}
		if
		(e.keyCode == 38){
			padRight -= 6;
		}
		if(e.keyCode == 83){
			padLeft += 6;
		}
		if
		(e.keyCode == 87){
			padLeft -= 6;
		}
		console.log(e.keyCode);

	},false);

	function loop(){

		context.clearRect(0,0,1040,585);
		context.fillStyle = "#aaff00";
		context.fillRect(0,0,1040,585);
		context.fillStyle = "#0000ff";
		context.beginPath();
		context.arc(posX,posY,10,0,2*Math.PI);
		context.closePath();
		context.fill();

		context.fillStyle = "#000000";
		context.fillRect(50,padLeft,30,100);
		context.fillRect(950,padRight,30,100);

		posX = posX + speedX;
		posY = posY + speedY;

		if(posX > 1040){
			posX=520;
		}
		if(posX <0){
			posX = 520;
		}
		if(posY > 585){
			speedY = -speedY;
		}
		if(posY <0){
			speedY = - speedY;
		}

	}

},false);