Transparentes Bild immer oben auf Canvas. Zeichnen Sie hinter transparentes Bild

Question

Hier ist mein jsfiddle:

Im suchend 2 Dinge:

1. ich immer das transparente Bild wollen: "https://s23.postimg.org/c3u19aeqz/bmap_Front.gif" oben auf der Zeichnung/Leinwand zu sein. Lassen Sie uns es Ebene Vordergrund nennen (lfg). Dieses Bild sollte niemals übermalt werden.

2. Wenn ich meine Zeichnung als Bild speichern. Ich möchte nur die "Zeichnungen" speichern, die unter dem Bild gezeichnet wurden. Dies bedeutet, alles außer dem transparenten Bild zu speichern.

Ich habe versucht, "spielen" mit:

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

und

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

Bisher nichts hat mir geholfen. Da ich sehr neu zu html/css/js bin, denke bitte daran, meine Geige zu verändern, wenn du mir helfen willst, weil ich es schwer habe zu verstehen, was ich tun soll, wenn es nur eine Befehlszeile ist.

Answer 1

Wenn Sie das tun, was Sie im OP gesagt haben, ist das Hinzufügen eines Bildelements auf der Leinwand der richtige Weg. Durch Hinzufügen der CSS-Regel "pointer-events: none" können Sie mit der rechten Maustaste auf die Leinwand klicken und nur das auf der Leinwand speichern.

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

Sie werden auch die addImg2Canvas entfernen müssen() Funktion aus dem Skript, da wir nicht mehr das Bild auf der Leinwand zeichnen möchten.