Search code examples
javascriptjqueryhtml5-canvasfabricjs

Get the canvas object while using fabric js


I'm using Fabric.js and I've created a fabric canvas object at one place.

var x = new fabric.Canvas("mycanvas");

Now at another place, I want to access this object where 'x' won't be available. So how can I get the same fabric canvas object.

I don't wanna change the scope of x or pass x as arg.

Also, how to get the toDataURL from the fabric canvas object?


Solution

  • Assuming that mycanvas is the ID of a Canvas element, you could store the reference to the fabric object on the Canvas element itself:

    var x = new fabric.Canvas("mycanvas");
    document.getElementById("mycanvas").fabric = x;
    

    You can then retrieve that object any time you want with:

    var y = document.getElementById("mycanvas").fabric;
    var url = y.toDataURL("png", 1);