Get the canvas object while using fabric js

javascript jquery html5-canvas fabricjs
viji picture viji · Nov 2, 2012 · Viewed 14.6k times · Source

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?

Answer

Alnitak picture Alnitak · Nov 2, 2012

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);

Related questions

How to upload an image to a canvas with Fabric.js?

I want that to create a process where the users can upload their images and then edit them in the browser in a Canvas with Fabric.js using some buttons, which uses Fabric.js to add some effects. I can't …

Read More
How do I get mouse coordinates on Fabric.js?

I'm trying to read the X coordinate of a mouse click on Fabric.js. Here is my code. The console logs undefined every time. var canvas = new fabric.Canvas('c1'); canvas.on('mouse:down', function(e){ getMouse(e); }); function …

Read More
How to show a running progress bar while page is loading

I want to show a running progress bar while my page is loading like here, in my page. I used a simple loading image in my example, but I want to convert it in a running progress bar. Here is …

Read More