title: HTML5 Canvas - fillRect() vs rect()
body: <p>In the code below, the second <code>fillStyle</code> overrides the color specified in first one if I use <code>rect()</code> and then <code>fill()</code> in both places (ie, both rects are green) but works as expected (ie, the first rect being blue and second being green) if I change the first <code>rect()</code> to <code>fillRect()</code>. Why is it so? I thought <code>fillRect()</code> was just <code>rect()</code> and then <code>fill()</code>, right?</p>
  
  <pre><code>ctx.translate(canvas.width/2, canvas.height/2);
  
  ctx.fillStyle = "#5A9BDC";
  ctx.fillRect(0, 0, rectWidth, rectHeight);
  // ctx.rect(0, 0, rectWidth, rectHeight);
  // ctx.fill();    
  
  ctx.translate(-canvas.width/2, -canvas.height/2);
  
  ctx.fillStyle = "#31B131";
  ctx.rect(0, 0, rectWidth, rectHeight);
  ctx.fill();
  </code></pre>
  
  <p><em>Tested in Chrome</em> | <a href="http://jsfiddle.net/hsr2a/">Fiddle</a></p>