title: html5 canvas context .fillStyle not working
body: <p>Just giving canvas a go for the first time with the intention of creating a game. I have an image displaying but oddly the fillStyle method doesn't seem to be working. ( At least the canvas background is still white in google chrome.) </p>
  
  <p>Note that in my code the canvas var is actually the canvas elements 2d context, maybe that's where i'm getting myself confused? i can't see the problem, would appreciate if anyone else could.</p>
  
  <p>LD24.js:</p>
  
  <pre><code>const FPS = 30;
  var canvasWidth = 0;
  var canvasHeight = 0;
  var xPos = 0;
  var yPos = 0;
  var smiley = new Image();
  smiley.src = "http://javascript-tutorials.googlecode.com/files/jsplatformer1-smiley.jpg";
  
  var canvas = null;
  window.onload = init; //set init function to be called onload
  
  function init(){
      canvasWidth = document.getElementById('canvas').width;
      canvasHeight = document.getElementById('canvas').height;
      canvas = document.getElementById('canvas').getContext('2d');
      setInterval(function(){
          update();
          draw();
      }, 1000/FPS);
  }
  
  function update(){
  
  }
  function draw()
  {
      canvas.clearRect(0,0,canvasWidth,canvasHeight);
      canvas.fillStyle = "#FFAA33"; //orange fill
      canvas.drawImage(smiley, xPos, yPos);
  
  }
  </code></pre>
  
  <p>LD24.html:
  </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script language="javascript" type="text/javascript" src="LD24.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
  
  
  &lt;canvas id="canvas" width="800" height="600"&gt;
      &lt;p&gt; Your browser does not support the canvas element needed to play this game :(&lt;/p&gt;
  &lt;/canvas&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>