title: How to set canvas on top of image in html
body: <p>Say I have a index.html with a canvas in it:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body style="text-align: center;background: #f2f6f8;"&gt;
  
  &lt;div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333"&gt;
      &lt;canvas id="gameCanvas" width="320" height="480"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the canvas is showing ok this way ~~~</p>
  
  <p>Now I want to put a image as background behind the canvas and I tried to add a img tag in the body:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body style="text-align: center;background: #f2f6f8;"&gt;
  &lt;img src="xxx.png" alt="" /&gt;
  &lt;div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333"&gt;
      &lt;canvas id="gameCanvas" width="320" height="480"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>but then the canvas appeared to show after the image not on top of it ...</p>
  
  <p>I really know nothing about html I think it should not be that hard to get this done, hope someone can give a hand here, thanks :)</p>