CODEWITHSUNDEEP
javascriptjqueryhtmlcanvasfabricjs
necroface
necroface

Reputation: 3465

Insert fabric image onto canvas

I setup a canvas with id edit-canvas. At first, I upload a background image and render it on that canvas. Now I want to import additional images on which I can manipulate (zoom, drag...) using Fabricjs. I have functions like these so as to import images every time I click on them before further manipulating:

function insertImage(src){
    var canvas=new fabric.Canvas('edit-canvas');
    canvas.setBackgroundImage(url,canvas.renderAll.bind(canvas));
    fabric.Image.fromURL(src, function (img) {
        var oImg = img.set({left:0,top: 0});
        canvas.add(oImg).renderAll();
        canvas.setActiveObject(oImg);
    });
}

$('#sticker-tool .sticker-selection img').click(function(){
                    insertImage(this.src);
});

When I click on an image, my drawn background image is completely cleared. How can I fix it? My code now is also unable to render multiple imported images? How can I keep uploaded background image and control imported images as if they are layers on background?

Upvotes: 0

Views: 424

Answers (1)

StefanHayden
StefanHayden

Reputation: 3669

Why are you creating a new fabric instance and setting the background each time you call insertImage?

var canvas=new fabric.Canvas('edit-canvas'); canvas.setBackgroundImage(url,canvas.renderAll.bind(canvas));

call it once and then only add new images with the insertImage function.

Upvotes: 2

Related Questions