title: Trying to fill in two different colors in canvas fill()
body: <p>I'm trying to draw a house using Canvas and Javascript.  If you look at my drawHouse() method, I want to color the roof red, and everything else white.  But only the white is filling in to color everything.</p>
  
  <p><a href="http://jsfiddle.net/sVDSs/" rel="nofollow">Jsfiddle link</a></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="300" height="300" style="border:1px solid #EEE"&gt;
      &lt;/canvas&gt;
          &lt;script&gt;
              var canvas = document.getElementById("myDrawing");
              var ctx = canvas.getContext("2d");
  
              //draws a house
              function drawImage() {
                  drawSky();
                  drawGrass();
                  drawHouse();
              }
  
  
  
              //sets the dimensions of the canvas
              var x = canvas.width / 2;
              var y = 400;
              var radius = 200;
              var startAngle = 0;
              var endAngle = 22 * Math.PI;
  
  
  
              //draws the sky
  
              function drawSky() {
                  var context = canvas.getContext('2d');
  
                  context.beginPath();
                  context.rect(0, 0, 300, 300);
                  context.fillStyle = '#0099FF';
                  context.fill();
                  context.lineWidth = 1;
                  context.strokeStyle = 'black';
                  context.stroke();
              }
              //draws green grass
              function drawGrass() {
                  ctx.beginPath();
                  ctx.arc(x, y, radius, startAngle, endAngle);
                  ctx.stroke();
                  ctx.fillStyle = "#009900";
                  ctx.fill();
  
              }
  
              function drawHouse() {
                  var c = document.getElementById('myDrawing');
                  var ctx = c.getContext('2d');
                  ctx.beginPath();
                  ctx.moveTo(95, 165);
                  ctx.lineTo(140, 215);
                  ctx.lineTo(260, 215);
                  ctx.lineTo(240, 165);
                  ctx.lineTo(95, 165);
                  ctx.closePath();
                  ctx.fillStyle = "#C81E1E";
                  ctx.fill();
  
  
                  ctx.moveTo(139, 215);
                  ctx.lineTo(94, 165);
                  ctx.lineTo(45, 215)
                  ctx.closePath();
                  ctx.fillStyle = "white";
                  ctx.fill();
  
  
                  ctx.moveTo(48, 212);
                  ctx.lineTo(48, 275);
                  ctx.lineTo(139, 275);
                  ctx.lineTo(139, 215);
                  ctx.lineTo(45, 215);
                  ctx.closePath();
                  ctx.fillStyle = "white";
                  ctx.fill();
                  ctx.stroke();           
  
  
                  ctx.moveTo(139, 275);
                  ctx.lineTo(260, 267);
                  ctx.lineTo(260, 215);
                  ctx.lineTo(140, 215);
  
                  ctx.closePath();
                  ctx.fillStyle = "white";
                  ctx.fill();
                  ctx.stroke();
  
              }
              drawImage();
          &lt;/script&gt;        
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>