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
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();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.