CODEWITHSUNDEEP
javascriptfabricjs
Aiyuni
Aiyuni

Reputation: 810

FabricJS: Cannot read property of 'e' of undefined

Getting the following error and even though I know what the error means (an object is undefined/null so its property e fails), I'm not sure why it's getting this error. Pretty sure it is related to some FabricJS object and not just plain Javascript. If anyone that knows FabricJS can help me out, that would be great.

fabric.js:8466 Uncaught TypeError: Cannot read property 'e' of undefined
    at klass.onMouseDown (fabric.js:8466)
    at HubConnection.<anonymous> (chat.js:128)

My code: This function is client side code for receiving a mousedown event from the server (which gets that info from the sending client). It create a new PencilBrush object on the receiving client, and starts it at the same position the sending client presses mousedown. Basically I'm trying to display what the sending client is drawing to receiving client in live time, and this is one of the functions that helps with that.

connection.on("ReceiveMouseDown", function (user, coordinate) {  //coordinate is a string

        console.log("inside receive mouse down: " + coordinate); //this returns {x: value, y: value}
        var coordinateObject = JSON.parse(coordinate);  
        console.log('coordinateObject is: ' + coordinateObject);  //this returns [object object]

        brush = new fabric.PencilBrush(canvas);
        brush.onMouseDown(coordinateObject);  //this is line 128, exception occurs here
        //brush.onMouseDown(coordinate);  I have also tried this way, but same exception happens
        canvas.renderAll();
    });

My findings: I think the PencilBrush.onMouseDown() method takes a Pointer (as seen here http://fabricjs.com/docs/fabric.PencilBrush.html ), but the docs aren't very good at explaining what a Pointer object is.

Upvotes: 1

Views: 2471

Answers (2)

Chirag Purohit
Chirag Purohit

Reputation: 741

If any one is trying with recent fabric js and facing the same issue, try following. I am using version 4.4.0

var canvas = new fabric.Canvas(document.getElementById('canvasId'));//Primary canvas
var canvas2 = new fabric.Canvas(document.getElementById('canvasId2'));//Drawing programmatically on second canvas


//Getting points from first canvas
const pointer = canvas.getPointer(e);



//Drawing on second convas

let options = {pointer,e:{}};
canvas2.freeDrawingBrush.onMouseDown(initialPointer,options);

Upvotes: 1

user8379014
user8379014

Reputation:

I think you are using version 3.3. Try using version 3.2 instead of version 3.3... the source code has been changed a bit to require an extra param.

Upvotes: 0

Related Questions