Stack Exchange
Fabric.js Merge Multiple Canvas JSON ( or ) SVG
Is it possible to merge multiple canvas JSON ( or ) SVG files.?
Sample Code :
var canvas, leftcanvas, rightcanvas, ctx, activeObject, text = '';
canvas = new fabric.Canvas('canvas');
ctx = canvas.getContext('2d');
text = new fabric.Text('canvas', {
    left: 50,
  top: 50,
  fill: 'red',
  fontFamily : 'Courier New',
});
canvas.add(text).renderAll().setActiveObject(text);

leftcanvas = new fabric.Canvas('leftcanvas');
var ctx1 = leftcanvas.getContext('2d');
var text = new fabric.Text('leftcanvas', {
    left: 50,
  top: 50,
  fill: 'red',
  fontFamily : 'Courier New',
});
leftcanvas.add(text).renderAll().setActiveObject(text);

rightcanvas = new fabric.Canvas('rightcanvas');
var ctx2 = leftcanvas.getContext('2d');
var text = new fabric.Text('rightcanvas', {
    left: 50,
  top: 50,
  fill: 'red',
  fontFamily : 'Courier New',
});
rightcanvas.add(text).renderAll().setActiveObject(text);

var JSON1, JSON2, JSON3 = '';
JSON1 = canvas.toJSON();
JSON2 = leftcanvas.toJSON();
JSON3 = rightcanvas.toJSON();

Here we have 3 numbers of json files. I have to combine those files & import into new canvas.

Hi, do you need to merge these from different users? I have a similar question, just wondering how you solved this?

var circle1 = new fabric.Circle({
  radius: 50,
  fill: 'red',
  left: 0
});
var circle2 = new fabric.Circle({
  radius: 50,
  fill: 'green',
  left: 100
});
var circle3 = new fabric.Circle({
  radius: 50,
  fill: 'blue',
  left: 200
});

var group = new fabric.Group([ circle1, circle2, circle3 ], {
  left: 200,
  top: 100
});

canvas.add(group);


