Menu
JavaScript for drag&drop and resizing. Now when I click a button I can load a image in a canvas and it is draggable. But when I click second time the first image is vanish, and new one is coming I want both images. This is the code I'am using:
<html>
<head>
<script src="fabric.min.js"></script>
</head>
<body>
<canvas id="c"></canvas>
<img src="icon_03.jpg" id="my-image">
<button onclick="myFunction()">click</button>
<script>
function myFunction() {
var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement, {
left: 100,
top: 100,
angle: 30,
opacity: 0.85
});
canvas.add(imgInstance);
};
</script>
</body>
</html>
874
asked Nov 23 '25 16:11
I think the problem is, that you are creating a canvas object in your function, so there is always a new canvas, which is empty created and drawn over the existing one. I updated your fiddle, so that whenever you click on the button, a new image is added to the canvas: http://jsfiddle.net/z4fty1de/7/
this is my code:
var canvas = new fabric.Canvas('c');
$('#image').click(myFunction);
function myFunction() {
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement, {
left: 100,
top: 100,
angle: 30,
opacity: 0.85
});
canvas.add(imgInstance);
};
I hope I could help you. :)
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With