From 6a792dc2a3ad0d7575865ba865f24342a7bb4221 Mon Sep 17 00:00:00 2001
From: Dan Buch <dan@meatballhat.com>
Date: Sun, 10 Feb 2013 22:18:56 -0500
Subject: [PATCH] Circle time, plus a smidge of refactoring

---
 html5/canvas/mdn-tutorial.html | 67 ++++++++++++++++++++++++----------
 1 file changed, 47 insertions(+), 20 deletions(-)
diff --git a/html5/canvas/mdn-tutorial.html b/html5/canvas/mdn-tutorial.html
index c9f5f21..b7ba269 100644
--- a/html5/canvas/mdn-tutorial.html
+++ b/html5/canvas/mdn-tutorial.html
@@ -9,32 +9,35 @@
     </style>
   </head>
   <body>
-    <canvas id="tutorial0" width="150" height="150"></canvas>
-    <canvas id="tutorial1" width="150" height="150"></canvas>
-    <canvas id="tutorial2" width="150" height="150"></canvas>
-    <canvas id="tutorial3" width="150" height="150"></canvas>
+    <canvas id="tut0" width="150" height="150"></canvas>
+    <canvas id="tut1" width="150" height="150"></canvas>
+    <canvas id="tut2" width="150" height="150"></canvas>
+    <canvas id="tut3" width="150" height="150"></canvas>
+    <canvas id="tut4" width="150" height="200"></canvas>
 
     <script type="text/javascript">
-      function draw0() {
-        var ctx = document.getElementById('tutorial0').getContext('2d');
+      var drawings = {};
+
+      drawings.draw0 = function () {
+        var ctx = document.getElementById('tut0').getContext('2d');
 
         ctx.fillStyle = 'rgb(200, 0, 0)';
         ctx.fillRect(10, 10, 55, 50);
 
         ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
         ctx.fillRect(30, 30, 55, 50);
-      }
+      };
 
-      function draw1() {
-        var ctx = document.getElementById('tutorial1').getContext('2d');
+      drawings.draw1 = function() {
+        var ctx = document.getElementById('tut1').getContext('2d');
 
         ctx.fillRect(25, 25, 100, 100);
         ctx.clearRect(45, 45, 60, 60);
         ctx.strokeRect(50, 50, 50, 50);
-      }
+      };
 
-      function draw2() {
-        var ctx = document.getElementById('tutorial2').getContext('2d');
+      drawings.draw2 = function() {
+        var ctx = document.getElementById('tut2').getContext('2d');
 
         ctx.beginPath();
         ctx.arc(75, 75, 50, 0, Math.PI*2, true);
@@ -45,10 +48,10 @@
         ctx.moveTo(95, 65);
         ctx.arc(90, 65, 5, 0, Math.PI*2, true);
         ctx.stroke();
-      }
+      };
 
-      function draw3() {
-        var ctx = document.getElementById('tutorial3').getContext('2d');
+      drawings.draw3 = function() {
+        var ctx = document.getElementById('tut3').getContext('2d');
 
         ctx.beginPath();
         ctx.moveTo(25, 25);
@@ -62,13 +65,37 @@
         ctx.lineTo(45, 125);
         ctx.closePath();
         ctx.stroke();
-      }
+      };
+
+      drawings.draw4 = function() {
+        var ctx = document.getElementById('tut4').getContext('2d');
+
+        for(var i=0; i<4; i++) {
+          for(var j=0; j<3; j++) {
+            ctx.beginPath();
+            var x = 25+j*50,
+                y = 25+i*50,
+                radius = 20,
+                startAngle = 0,
+                endAngle = Math.PI+(Math.PI*j)/2,
+                anticlockwise = i%2==0 ? false : true;
+
+            ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+            if (i > 1) {
+              ctx.fill();
+            } else {
+              ctx.stroke();
+            }
+          }
+        }
+      };
 
       window.addEventListener('load', function() {
-        draw0();
-        draw1();
-        draw2();
-        draw3();
+        for(funcname in drawings) {
+          console.log("Calling %s", funcname);
+          drawings[funcname]();
+        }
       }, false);
     </script>
   </body>
