jCanvas - 背景图像消失

Question

im use this http://projects.calebevans.me/jcanvas/ and im have simple example

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

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

if im click on button bt,and hover canvas div, my background disappears how i can do what new image draw over background

Answer 1

Your background gets erased because you are using ctx.drawImage , which does not create a jCanvas layer. jCanvas layers and non-layers cannot exist on the same canvas, because when jCanvas redraws the canvas (manually via drawLayers() or automatically when events are triggered), non-layers will be erased.

To fix this, simply draw "tank_usa.jpg" like you drew 'facesSmall.png' : using addLayer with type: 'image' set.

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