Let’s say I have two canvas elements:
<canvas id="c1" width="400" height="300"></canvas>
<canvas id="c2" width="400" height="300"></canvas>
<canvas id="c3" width="400" height="300"></canvas>
From looking at the docs, it tells me that I can use this to convert the canvas into a FabricJS canvas.
var c = new fabric.Canvas('c1', {
preserveObjectStacking: true,
isDrawingMode: false
});
Now, if I wanted to do something with this new canvas, adding a circle for instance, I could use this function:
function AddCircle() {
var object = new fabric.Circle({
radius: 15,
fill: 'blue',
left: 100,
top: 100
});
c.add(object);
}
Now, this is all well and good for c1
but c2
and c3
won’t do anything because it’s never being initialized. So is it possible to alternate between FabricJS canvas elements?
I’d like the functionality to be similar to activeCanvas.add(object)
instead of just c.add(object)
.
Before you respond, please note that I’m well aware that I could just use the same method for the c2
element, but I’d like to alternate between canvas elements instead as I have something planned for that.
Melciar‘s answer is a fantastic explanation, and I recommend you read it, but I’d like to build on one thing he said. You can initialize them like this:
And now you can modify them all, or individually. If you want to modify them all simultaniously, you can do this:
and, of course, you can still modify them individually as per melchair‘s fantastic explanation:
I’m not entirely sure what you mean by alternating between canvas elements, but here’s my recommendation.
Initialize all canvases first:
Reference the appropriate canvas when performing a Fabric actions:
FabricJS doesn’t have an inbuilt activeCanvas variable when working with multiple canvases, but you can achieve that using events.
Now your activeCanvas variable will always refer to the last canvas your mouse entered. Obviously using the
mouse:over
event won’t work if you want to support touch devices so you may want to choose another event that best fits your project.Now you can modify your
AddCircle()
function to refer to the activeCanvas.