How to make canvas line drawings above image?

Question

Basically, I'm creating a matching game. When I select an item(e.g. 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();

Just check this out... may be it will help you ..http://stackoverflow.com/questions/10623678/html5-canvas-how-to-draw-a-line-over-an-image-background and this one also http://stackoverflow.com/questions/26902084/html5-canvas-how-to-draw-rectangle-over-image-in-canvas?lq=1 — Akshay Kumar, Feb 12 '16 at 05:38
@AkshayKumar Well I think it's different in this case because I'm not drawing on top of an image. I'm drawing lines on a canvas and I'm translating the image which just so happens to come across the line. Correct me if I'm wrong — CHEWWWWWWWWWW, Feb 12 '16 at 05:49
You are doing everything so wrong I dont even know where to start — QBM5, Feb 12 '16 at 18:20
@CHEWWWWWWWWWW. A Suggestion: Consider refactoring your code to have all game elements drawn on the canvas where its much easier to coordinate game elements, user mouse events and game connection lines. — markE, Feb 13 '16 at 07:41

score 0 · Answer 1 · answered Feb 12 '16 at 06:19

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;
}

How to make canvas line drawings above image?

1 Answers1