Triangles!

html5/canvas/mdn-tutorial.html

@@ -12,6 +12,8 @@
     <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>
+
     <script type="text/javascript">
       function draw0() {
         var ctx = document.getElementById('tutorial0').getContext('2d');
@@ -45,10 +47,28 @@
         ctx.stroke();
       }
 
+      function draw3() {
+        var ctx = document.getElementById('tutorial3').getContext('2d');
+
+        ctx.beginPath();
+        ctx.moveTo(25, 25);
+        ctx.lineTo(105, 25);
+        ctx.lineTo(25, 105);
+        ctx.fill();
+
+        ctx.beginPath();
+        ctx.moveTo(125, 125);
+        ctx.lineTo(125, 45);
+        ctx.lineTo(45, 125);
+        ctx.closePath();
+        ctx.stroke();
+      }
+
       window.addEventListener('load', function() {
         draw0();
         draw1();
         draw2();
+        draw3();
       }, false);
     </script>
   </body>