透明图像始终位于画布顶部。 在透明图像后面绘制

Question

Here is my jsfiddle :

Im looking for 2 things:

1. i always want the transparent image: "https://s23.postimg.org/c3u19aeqz/bmap_Front.gif" to be on top of the drawing/canvas. Lets call it layer foreground (lfg) . This image should never be overpainted.

2. When i save my drawing as image. I only want to save the "drawings" that were drawn underneath the image. This means saving everything except the transparent image.

I tried "playing" with:

ctx.globalCompositeOperation = "source-over";
ctx.globalCompositeOperation = "destination-over";

and

    <div id="LayerTown" class="containerChild" style="position: relative;">
        <canvas id="canvas" style="position: absolute; left: 0; top: 0; z-index: 0;">
          Update your browser
        </canvas>
        <img src='https://s23.postimg.org/c3u19aeqz/bmap_Front.gif' style="position: absolute; left: 0; top: 0; z-index: 1;">    
    </div>

So far nothing has helped me. Since im very new to html/css/js please consider alterating my fiddle if you want to help me, because i have a hard time understanding what i should do, if its just a command line.

Answer 1

Doing what you said in the OP, adding a image element on top of the canvas is the way to go. By adding the CSS rule "pointer-events:none" you will be able to right click the canvas through the image and saving only what's on the canvas.

<div id="LayerTown" class="containerChild" style="position: relative;">
    <canvas id="canvas" style="position: absolute;">
      Update your browser
    </canvas>
    <img src='https://s23.postimg.org/c3u19aeqz/bmap_Front.gif' style="position: absolute; pointer-events: none;">    
</div>

You will also have to remove the addImg2Canvas() function from the script as we no longer want to draw the image on the canvas.