jCanvas - Hintergrundbild verschwindet

Question

im dieses http://projects.calebevans.me/jcanvas/ verwenden und im haben einfaches Beispiel

<input type="button" class="bt" value="draw"/><br> 
    <canvas id="picture" width=1350 height=1350></canvas> 

und js

var canvas = document.getElementById("picture"); 
var ctx = canvas.getContext('2d'); 
    var img = new Image(); 
    img.src = "tank_usa.jpg"; 
    img.onload = function(){ 
     ctx.drawImage(img, 0, 0); 
    } 
$(".bt").on("click",function(){ 
// Draw a resizable image 
$('#picture').addLayer({ 
    type: 'image', 
    draggable: true, 
    source: 'facesSmall.png', 
    fillStyle: '#fff', 
    strokeStyle: '#c33', 
    strokeWidth: 2, 
    x: 180, y: 150, 
    width: 200, height: 125, 
    handle: { 
    type: 'arc', 
    fillStyle: '#fff', 
    strokeStyle: '#c33', 
    strokeWidth: 2, 
    radius: 10 
    } 
}) 
.drawLayer(); 
}) 

wenn im Klick auf den Button bt, und schweben Leinwand div, mein Hintergrund verschwindet wie kann ich was Neues Bild über Hintergrund zu zeichnen

Answer 1

Ihr Hintergrund wird gelöscht, weil Sieverwenden, die keine jCanvas-Ebene erstellt. jCanvas-Ebenen und Nicht-Ebenen können nicht auf derselben Zeichenfläche vorhanden sein. Wenn jCanvas die Zeichenfläche neu zeichnet (manuell über drawLayers() oder automatisch, wenn Ereignisse ausgelöst werden), werden Nicht-Ebenen gelöscht.

Um dies zu beheben, einfach zeichnen "tank_usa.jpg" wie Sie gezeichnet 'facesSmall.png': addLayer mit type: 'image' Set verwenden.

$('#picture').addLayer({ 
    type: 'image', 
    source: 'tank_usa.jpg', 
    x: 0, y: 0, 
    fromCenter: false 
}); 
$(".bt").on("click",function(){ 
    // Draw a resizable image 
    $('#picture').addLayer({ 
     type: 'image', 
     draggable: true, 
     source: 'facesSmall.png', 
     fillStyle: '#fff', 
     strokeStyle: '#c33', 
     strokeWidth: 2, 
     x: 180, y: 150, 
     width: 200, height: 125, 
     handle: { 
      type: 'arc', 
      fillStyle: '#fff', 
      strokeStyle: '#c33', 
      strokeWidth: 2, 
      radius: 10 
     } 
    }) 
    .drawLayer(); 
});