Untitled

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8"/>
 <title>Canvas animacja</title>
  </head>
 <body onload="DrawMe();">
 <canvas id="mycanvas" width="600" height="600"></canvas>
 </body>
</html>
 <style type="text/css">
 canvas { border: 1px solid black; }
 </style>
 <script type="text/javascript">

		var canvas = document.getElementById('mycanvas');
        var ctx = canvas.getContext('2d');
		var container = {
		  x: 0,
		  y: 0,
		  width: 600,
		  height: 600
		};

		var ball = {
			  x: 10,
			  y: 10,
			  r: 10,
			  vx: 5,
			  vy: 4,
			  color: 'orange'
			};

        function DrawMe() {

			ctx.fillStyle = "#000000";
			ctx.fillRect(container.x, container.y, container.width, container.height);


				ctx.beginPath();
				ctx.fillStyle =ball.color;

				ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2, false);
				ctx.fill();

				if(ball.x + ball.vx > (container.width - ball.r))
				{
					if(ball.y + ball.vy > container.height - ball.r)
					{
						if(ball.x -ball.vx < container.width - ball.r)
							ball.y -=ball.r;
					}
					else
						ball.x -=ball.vx;
				}
				else
				{
						ball.x += ball.vx;
				}

				requestAnimationFrame(DrawMe);
			}


		requestAnimationFrame(DrawMe);


 </script>