From af3e1f0b24bf7f1fd9957a9fa10b4a756a55f706 Mon Sep 17 00:00:00 2001
From: Dan Buch <daniel.buch@gmail.com>
Date: Sat, 31 Dec 2016 23:00:16 -0500
Subject: [PATCH] MDN breakout step 2

---
 mdn-breakout/index.html | 33 ++++++++++++++++++---------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/mdn-breakout/index.html b/mdn-breakout/index.html
index 986ae1c..3e0058f 100644
--- a/mdn-breakout/index.html
+++ b/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();
-ctx.rect(20, 40, 50, 50);
-ctx.fillStyle = "#FF0000";
-ctx.fill();
-ctx.closePath();
+function drawBall() {
+  ctx.beginPath();
+  ctx.arc(x, y, 10, 0, Math.PI*2);
+  ctx.fillStyle = "#0095DD";
+  ctx.fill();
+  ctx.closePath();
+}
 
-ctx.beginPath();
-ctx.arc(240, 160, 20, 0, Math.PI*2, false);
-ctx.fillStyle = "green";
-ctx.fill();
-ctx.closePath();
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  drawBall();
+  x += dx;
+  y += dy;
+}
 
-ctx.beginPath();
-ctx.rect(160, 10, 100, 40);
-ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
-ctx.stroke();
-ctx.closePath();
+setInterval(draw, 10);
     </script>
   </body>
 </html>