title: HTML5 Canvas - How to fill() a specific context
body: <p>I'm trying to make a website where an image is drawn on Canvas, then later the user is able to press a button to ctx.fill() certain parts of it with color. I'm running into issues where I can only ctx.fill() the most recently created shape which often isn't the shape I want.</p>
  
  <p>Here's an example. In this code (live at <a href="http://build.rivingtondesignhouse.com/piol/test/" rel="nofollow">http://build.rivingtondesignhouse.com/piol/test/</a>) I'm trying to draw the first rectangle, then save() it on the stack, then draw the second rectangle (and don't save it), then when my fill() function is called I want to restore() the first rectangle and ctx.fill() it with a different pattern. It doesn't work!</p>
  
  <p>In practice, I'm actually trying to fill the gray part of this complex shape with any color the user chooses AFTER the image has been drawn, but I think the technique is the same. (http://build.rivingtondesignhouse.com/piol/test/justTop.html)</p>
  
  <p>Thanks in advance for any help!!!</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var canvas;
  var ctx;
  
  function init() {
      canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d");
      draw();
  }
  
  
  function draw() {   
      ctx.fillStyle = '#FA6900';
      ctx.shadowOffsetX = 5;
      ctx.shadowOffsetY = 5;
      ctx.shadowBlur    = 4;
      ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
      ctx.fillRect(0,0,15,150);
      ctx.save();
  
      ctx.fillStyle = '#E0E4CD';
      ctx.shadowOffsetX = 10;
      ctx.shadowOffsetY = 10;
      ctx.shadowBlur    = 4;
      ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
      ctx.fillRect(30,0,30,150);
  }
  
  function fill(){
      var image = new Image();
      image.src = "http://www.html5canvastutorials.com/demos/assets/wood-pattern.png";
      image.onload = drawPattern;
      function drawPattern() {
          ctx.restore();
          ctx.fillStyle = ctx.createPattern(image, "repeat");
          ctx.fill();
      }
  }
  
  init();
  </code></pre>
  
  <p></p>