Concat Two JSON Objects (Option 1)

http://stackoverflow.com/questions/42434411/concat-two-json-object-for-adding-data-in-fabic-js-canvas

by Tim Harker

HTML

<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id="canvas" width="800" height="800" class="canvas"></canvas>

CSS

canvas {
  border: 1px solid red;
}

JavaScript

var canvas = new fabric.Canvas('canvas');
var json1 = {
  "objects": [{
    "type": "i-text",
    "originX": "left",
    "originY": "top",
    "left": 253.75,
    "top": 377.4,
    "width": 293.49609375,
    "height": 45.199999999999996,
    "fill": "#454545",
    "stroke": null,
    "strokeWidth": 1,
    "strokeDashArray": null,
    "strokeLineCap": "butt",
    "strokeLineJoin": "miter",
    "strokeMiterLimit": 10,
    "scaleX": 1,
    "scaleY": 1,
    "angle": 0,
    "flipX": false,
    "flipY": false,
    "opacity": 1,
    "shadow": null,
    "visible": true,
    "clipTo": null,
    "backgroundColor": "",
    "fillRule": "nonzero",
    "globalCompositeOperation": "source-over",
    "transformMatrix": null,
    "skewX": 0,
    "skewY": 0,
    "text": "Start typing here",
    "fontSize": 40,
    "fontWeight": "normal",
    "fontFamily": "arial",
    "fontStyle": "",
    "lineHeight": 1.16,
    "textDecoration": "",
    "textAlign": "left",
    "textBackgroundColor": "",
    "charSpacing": 0,
    "originalScaleX": 1,
    "originalScaleY": 1,
    "originalLeft": 253.751953125,
    "originalTop": 377.4,
    "lockMovementX": false,
    "lockMovementY": false,
    "lockScalingX": false,
    "lockScalingY": false,
    "lockUniScaling": false,
    "lockRotation": false,
    "id": 8454,
    "styles": {}
  }],
  "background": "#ffffff",
  "height": 800,
  "width": 801,
  "originalHeight": 800,
  "originalWidth": 801
};
var json2 = {
  "objects": [{
    "type": "i-text",
    "originX": "left",
    "originY": "top",
    "left": 253.75,
    "top": 377.4,
    "width": 293.49609375,
    "height": 45.199999999999996,
    "fill": "#454545",
    "stroke": null,
    "strokeWidth": 1,
    "strokeDashArray": null,
    "strokeLineCap": "butt",
    "strokeLineJoin": "miter",
    "strokeMiterLimit": 10,
    "scaleX": 1,
    "scaleY": 1,
    "angle": 0,
    "flipX": false,
    "flipY": false,
    "opacity": 1,
    "shadow": null,
    "visible": true,
    "clipTo": null,
   ...