CODEWITHSUNDEEP
fabricjs
padejar
padejar

Reputation: 83

javascript fabricjs - Adding an object to multiple canvases in a single click

I'm building an app that can design your own business card. I have to add an object to two canvases in a single click. Here are my codes:

$('#image-list').on('click','.image-option',function(e) {
        var el = e.target;
        /*temp code*/
        var offset = 50;
        var left = fabric.util.getRandomInt(0 + offset, 200 - offset);
        var top = fabric.util.getRandomInt(0 + offset, 400 - offset);
        var angle = fabric.util.getRandomInt(-20, 40);
        var width = fabric.util.getRandomInt(30, 50);
        var opacity = (function(min, max){ return Math.random() * (max - min) + min; })(0.5, 1);
        var canvasObject;
        // if ($('#flip').attr('data-facing') === 'front') {
        //  canvasObject = canvas;
        // } else {
        //  canvasObject = canvas2;
        // }

        fabric.Image.fromURL(el.src, function(image) {
            image.set({
                left: left,
                top: top,
                angle: 0,
                padding: 10,
                cornersize: 10,
                hasRotatingPoint:true
            });

            canvas.add(image);
            canvas2.add(image);
        });
    })

The problem is, when I resized or move the image on the 'front canvas', it also renders the same way in the 'back canvas'. In my case, I don't want the object to be that way. So is there a way to prevent the obect 'mirroring' on the other canvas? Thanks.

Upvotes: 0

Views: 1408

Answers (1)

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

You cannot add the same object to 2 canvases. You have to create 2 objects.

Also take note that if you have an html image element on your page you do not need to load it from URL again. Is already loaded, so pass the image element to the constructor directly

$('#image-list').on('click','.image-option',function(e) {
    var el = e.target;
    /*temp code*/
    var offset = 50;
    var left = fabric.util.getRandomInt(0 + offset, 200 - offset);
    var top = fabric.util.getRandomInt(0 + offset, 400 - offset);
    var angle = fabric.util.getRandomInt(-20, 40);
    var width = fabric.util.getRandomInt(30, 50);
    var opacity = (function(min, max){ return Math.random() * (max - min) + min; })(0.5, 1);
    var canvasObject;
    // if ($('#flip').attr('data-facing') === 'front') {
    //  canvasObject = canvas;
    // } else {
    //  canvasObject = canvas2;
    // }

    image = new fabric.Image(el, {
            left: left,
            top: top,
            angle: 0,
            padding: 10,
            cornersize: 10,
            hasRotatingPoint:true
        });

    image2 = new fabric.Image(el, {
            left: left,
            top: top,
            angle: 0,
            padding: 10,
            cornersize: 10,
            hasRotatingPoint:true
        });

        canvas.add(image);
        canvas2.add(image2);
    });
})

Upvotes: 1

Related Questions