Fabric.js Image.fromURL not working in Firefox

Question

I am using Fabric.js and jQuery UI for a drag and drop scene creator. When I drag and drop an image into the canvas on Chrome everything works fine. However, when I drag and drop an image on Firefox it does nothing and I get the following error in the console:

TypeError: t is undefined

Here is my code:

// HTML

<canvas id="scene"></canvas>

// Draggable setup

$('.scene-item').draggable({
    helper: 'clone',
    appendTo: 'body',
    containment: 'window',
    scroll: false,
    zIndex: 9999
});

// Drop Setup

var canvas = new fabric.Canvas('scene');

canvas.setDimensions({
        width: '800px',
        height: '500px'
    }, {
        cssOnly: true
});
document.getElementById("scene").fabric = canvas;

canvas.on({
    'object:moving': function(e) {
        e.target.opacity = 0.5;
    },
    "object:modified": function(e) {
        e.target.opacity = 1;
    }
});


    $('#scene').droppable({
        drop: function(e, ui) {
            if ($(e.target).attr('id') === 'scene') {
                var pointer = canvas.getPointer();
                fabric.Image.fromURL(ui.draggable[0].currentSrc, function (img) {
                    console.log(img);
                    img.set({
                        left: pointer.x - 20,
                        top: pointer.y - 20,
                        width: 52,
                        height: 52,
                        scale: 0.1
                    });
                    //canvas.clear();
                    canvas.add(img);
                    canvas.renderAll();
                });
            }
        }

    });

Any ideas as to what is happening?

EDIT:

I used the regular fabric.js instead of the minified version and the error was:

TypeError: event is undefined

score 0 · Accepted Answer · answered May 30 '15 at 17:43

I figured out what was wrong. I was not passing an event to the getPointer() function.

This code now works fine:

$('#scene').droppable({
        drop: function(e, ui) {
            if ($(e.target).attr('id') === 'scene') {
                var pointer = canvas.getPointer(e);
                fabric.Image.fromURL(ui.draggable[0].currentSrc, function (img) {
                    img.filters.push(new fabric.Image.filters.Resize({scaleX: 0.2, scaleY: 0.2}));
                    img.set({
                        left: pointer.x - 20,
                        top: pointer.y - 20,
                        width: 52,
                        height: 52
                    });
                    canvas.clear();
                    canvas.add(img);
                    canvas.renderAll();
                });
            }
        }

    });

Fabric.js Image.fromURL not working in Firefox

1 Answers1