How to make canvas line drawings above image?

Question

Basically, I'm creating a matching game. When I select an item(eg pear as seen in picture), it will translate to the right. However, it will end up being on top of the line drawn on the canvas. I want the line to be on top of the image and not the other way round.

I've tried using z-index for canvas to be greater than img but it does not work. Any idea how to fix this?

HTML

<table class="first">
  <tr>
    <td>
      <ul class="firstleft">
      /*some images to be filled here*/
      </ul>
    </td>
    <td>
      <canvas id="myCanvas" resize></canvas>
    </td>
    <td>
      <ul class="firstright">
      /*some images to be filled here*/
      </ul>
    </td>
  </tr>
</table>

CSS

img {
   z-index: 1;
}
canvas {
   z-index: 20;
}

JS

var canvas = document.getElementById('myCanvas');
ctx = canvas.getContext("2d")
ctx.lineWidth = 6;
ctx.strokeStyle = "#333";
/* Drawing part using an example*/
ctx.beginPath();
ctx.moveTo(100, 250);
ctx.bezierCurveTo(150, 100, 350, 100, 400, 250);
ctx.stroke();

Answer 1

in that case it works

var canvas = document.getElementById('demo'), /// canvas element
    ctx = canvas.getContext('2d'),            /// context
    line = new Line(ctx),                     /// our custom line object
    img = new Image;                          /// the image for bg

ctx.strokeStyle = '#fff';                     /// white line for demo

/// start image loading, when done draw and setup 
img.onload = start;
img.src = 'http://i.imgur.com/O712qpO.jpg';

function start() {
    /// initial draw of image
    ctx.drawImage(img, 0, 0, demo.width, demo.height);

    /// listen to mouse move (or use jQuery on('mousemove') instead)
    canvas.onmousemove = updateLine;
}