MDN breakout step 2

mdn-breakout/index.html

@@ -13,24 +13,27 @@ canvas { background: #eee; display: block; margin: 0 auto; }
     <script>
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");
+var x = canvas.width/2;
+var y = canvas.height-30;
+var dx = 2;
+var dy = -2;
 
-ctx.beginPath();
+function drawBall() {
-ctx.rect(20, 40, 50, 50);
+  ctx.beginPath();
-ctx.fillStyle = "#FF0000";
+  ctx.arc(x, y, 10, 0, Math.PI*2);
-ctx.fill();
+  ctx.fillStyle = "#0095DD";
-ctx.closePath();
+  ctx.fill();
+  ctx.closePath();
+}
 
-ctx.beginPath();
+function draw() {
-ctx.arc(240, 160, 20, 0, Math.PI*2, false);
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
-ctx.fillStyle = "green";
+  drawBall();
-ctx.fill();
+  x += dx;
-ctx.closePath();
+  y += dy;
+}
 
-ctx.beginPath();
+setInterval(draw, 10);
-ctx.rect(160, 10, 100, 40);
-ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
-ctx.stroke();
-ctx.closePath();
     </script>
   </body>
 </html>