From 26c1e56b7a7ebd068857dbbe7a96047f13867274 Mon Sep 17 00:00:00 2001
From: Dan Buch <dan@meatballhat.com>
Date: Sun, 10 Feb 2013 21:59:11 -0500
Subject: [PATCH] Smiles!

---
 html5/canvas/mdn-tutorial.html | 36 +++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 16 deletions(-)
diff --git a/html5/canvas/mdn-tutorial.html b/html5/canvas/mdn-tutorial.html
index 48397f3..9f342be 100644
--- a/html5/canvas/mdn-tutorial.html
+++ b/html5/canvas/mdn-tutorial.html
@@ -9,20 +9,13 @@
     </style>
   </head>
   <body>
-    <canvas id="tutorial0" width="150" height="150">
-      hammer down
-    </canvas>
-    <canvas id="tutorial1" width="150" height="150">
-      rabbit ears
-    </canvas>
+    <canvas id="tutorial0" width="150" height="150"></canvas>
+    <canvas id="tutorial1" width="150" height="150"></canvas>
+    <canvas id="tutorial2" width="150" height="150"></canvas>
     <script type="text/javascript">
       function draw0() {
-        var canvas = document.getElementById('tutorial0');
-        if (!canvas.getContext) {
-          return;
-        }
+        var ctx = document.getElementById('tutorial0').getContext('2d');
 
-        var ctx = canvas.getContext('2d');
         ctx.fillStyle = 'rgb(200, 0, 0)';
         ctx.fillRect(10, 10, 55, 50);
 
@@ -31,20 +24,31 @@
       }
 
       function draw1() {
-        var canvas = document.getElementById('tutorial1');
-        if (!canvas.getContext) {
-          return;
-        }
+        var ctx = document.getElementById('tutorial1').getContext('2d');
 
-        var ctx = canvas.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');
+
+        ctx.beginPath();
+        ctx.arc(75, 75, 50, 0, Math.PI*2, true);
+        ctx.moveTo(110, 75);
+        ctx.arc(75, 75, 35, 0, Math.PI, false);
+        ctx.moveTo(65, 65);
+        ctx.arc(60, 65, 5, 0, Math.PI*2, true);
+        ctx.moveTo(95, 65);
+        ctx.arc(90, 65, 5, 0, Math.PI*2, true);
+        ctx.stroke();
+      }
+
       window.addEventListener('load', function() {
         draw0();
         draw1();
+        draw2();
       }, false);
     </script>
   </body>
