title: Trying to align image and canvas
body: <p>First-time posting a question, and I avow up front that my HTML/CSS/Javascript knowledge is ... shall we say scrappy.  I usually manage, but I can't seem to figure this out.</p>
  
  <p>All I want to do is display an image centered.  Then create a canvas, position the canvas over the image, and draw on it.  <strong><em>Then</em></strong> have the canvas stay with the image as the browser is re-sized.  Here's what I have so far (I confess, I got much of the Javascript code from another poster, and I'm trying to use it as a learning example):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;script&gt;
      function myInit()
      {
      hdc = set_canvas();
      hdc.fillRect(0, 0, 50, 50);
      }
  
      function set_canvas()
      {
        var img = document.getElementById('audubon_image');
        var x = img.offsetLeft,
            y = img.offsetTop,
            w = img.clientWidth,
            h = img.clientHeight;
        var c = document.getElementById('myCanvas');
        img.parentNode.appendChild(c);
        c.style.zIndex = 1;
        c.style.left = x + 'px';
        c.style.top = y + 'px';
        c.setAttribute('width', w+'px');
        c.setAttribute('height', h+'px');
        hdc = c.getContext('2d');
        return(hdc);
      }
  &lt;/script&gt;
  
  &lt;style&gt;
  #container
  {
      text-align: center;
  }
  canvas
  {
      pointer-events: none;
      position: absolute;
      border: 1px solid black;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body onload='myInit()'&gt;
      &lt;div id="container"&gt;
      &lt;img src="http://www.sturtz.org/john/audubon/wp-content/uploads/2015/04/Audubon.jpg" id="audubon_image" /&gt;
      &lt;canvas id='myCanvas'&gt;&lt;/canvas&gt;     &lt;!-- gets re-positioned in myInit(); --&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What's supposed to happen:  The image gets placed.  Then the Javascript code determines the position and size of the image, and sets the canvas to match.  Then draws on the canvas (for the moment, a lovely elegant block box in the upper left corner).</p>
  
  <p>So far, so good.  But since the image centered, if the browser is re-sized (specifically made wider or narrower), the image's position moves relative to the left and right edges of the browser window.</p>
  
  <p>With 'position: absolute' specified for the canvas, the canvas does not move (unsurprisingly; I suppose that's what absolute means).  So the image and canvas do not stay aligned.</p>
  
  <p>If I change the canvas CSS to 'position: relative', then when I re-size the window, the image and canvas remain in the same position relative to one another (which is what I want).  But then I can't get the canvas over the top of the image.</p>
  
  <p>My gut feel is that this should be possible (easy, even), and my lack of knowledge is causing me not to see it.</p>