title: Drawing and displaying a smiley face (not showing)
body: <p>I'm trying to make a smiley face using the canvas tag and javascript.  I put the individual components of the face as their own methods (drawFace(), drawEyes(), drawSmile()).  I have these methods at the bottom of my code.  But nothing displays.  When I remove these methods and put all the code into one giant method it will display.</p>
  
  <p>How do I display the face using those methods?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;My Site's Title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;canvas id="myDrawing" width="200" height="200" style="border:1px solid #EEE"&gt;
      &lt;/canvas&gt;
              &lt;script&gt;
                  function drawFace() {
                      var canvas = document.getElementById("myDrawing");
                      var ctx = canvas.getContext("2d");
  
                      var x = canvas.width / 2;
                      var y = canvas.height / 2;
                      var radius = 75;
                      var startAngle = 0;
                      var endAngle = 2 * Math.PI;
  
                      ctx.beginPath();
                      ctx.arc(x, y, radius, startAngle, endAngle);
                      ctx.stroke();
                      ctx.fillStyle = "yellow";
                      ctx.fill();
                      }
  
                      function drawSmile(){
                      var x = canvas.width / 2;
                      var y = 160
                      var radius = 40;
                      var startAngle = 1.1 * Math.PI;
                      var endAngle = 1.9 * Math.PI;
  
                      ctx.beginPath();
                      ctx.arc(x, y, radius, startAngle, endAngle);
                      ctx.lineWidth = 7;
  
                      // line color
                      ctx.strokeStyle = 'black';
                      ctx.stroke();
                      }
  
  
                      function drawEyes{
                      var centerX = 40;
                      var centerY = 0;
                      var radius = 10;
  
                      // save state
                      ctx.save();
  
                      // translate context so height is 1/3'rd from top of enclosing circle
                      ctx.translate(canvas.width / 2, canvas.height / 3);
  
                      // scale context horizontally by 50%
                      ctx.scale(.5, 1);
  
                      // draw circle which will be stretched into an oval
                      ctx.beginPath();
                      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  
                      // restore to original state
                      ctx.restore();
  
                      // apply styling
                      ctx.fillStyle = 'black';
                      ctx.fill();
                      ctx.lineWidth = 2;
                      ctx.strokeStyle = 'black';
                      ctx.stroke();
  
                      //left eye
                      var centerX = -40;
                      var centerY = 0;
                      var radius = 10;
  
                      // save state
                      ctx.save();
  
                      // translate context so height is 1/3'rd from top of enclosing circle
                      ctx.translate(canvas.width / 2, canvas.height / 3);
  
                      // scale context horizontally by 50%
                      ctx.scale(.5, 1);
  
                      // draw circle which will be stretched into an oval
                      ctx.beginPath();
                      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  
                      // restore to original state
                      ctx.restore();
  
                      // apply styling
                      ctx.fillStyle = 'black';
                      ctx.fill();
                      ctx.lineWidth = 2;
                      ctx.strokeStyle = 'black';
                      ctx.stroke();
                      }
                      drawFace()
  
     function drawHappyFace(){
     drawFace();
     drawEyes();
     drawSmile();
  }
  
  drawHappyFace();
  
              &lt;/script&gt;        
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>