jCanvas - arka plan görüntüsü

Question

im bu http://projects.calebevans.me/jcanvas/ kullanmak kaybolur ve im basit örnek

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

ve 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(); 
}) 

düğmesi bt üzerinde im tıklama eğer varsa ve tuval div hover, benim arka plan kaybolur arka plan üzerinde ne yeni resim çizebilirim

Answer 1

Arka planınız siliniyor çünkükullanıyorsunuz Bir jCanvas tabakası oluşturmayan. jCanvas katmanları ve katman olmayanlar aynı tuvalde bulunamaz, çünkü jCanvas tuvali yeniden çizdiğinde (drawLayers() aracılığıyla veya olaylar tetiklendiğinde otomatik olarak), katman olmayanlar silinir.

Bunu düzeltmek için, 'facesSmall.png' çizmiş olduğunuz gibi "tank_usa.jpg" çizin: addLayer kullanarak type: 'image' ayarlayın.

$('#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(); 
});