Multiple Canvas Cloning

Multiple Canvas Cloning

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://www.printhubpro.co.uk/vendor/designer/designer/fabric.js"></script>
<canvas id="canvas1" width="400" height="400"></canvas>

CSS

#canvas1, #canvas2, #canvas3 {
  border: thin red solid;
}

JavaScript

var canvas1;
canvas1 = window._canvas = new fabric.Canvas('canvas1');


var polygon1 = new fabric.Polygon([
  {x: 200, y: 0},
  {x: 250, y: 50},
  {x: 250, y: 100},
  {x: 150, y: 100},
  {x: 150, y: 50} ], {
  left: 50,
  top: 150,
  angle: 0,
  fill: 'green'
});
var polygon2 = new fabric.Polygon([
  {x: 200, y: 0},
  {x: 250, y: 50},
  {x: 250, y: 100},
  {x: 150, y: 100},
  {x: 150, y: 50} ], {
  left: 250,
  top: 150,
  angle: 0,
  fill: 'green'
});

canvas1.add(polygon1).renderAll().setActiveObject(polygon1);

json1 = canvas1.toJSON();