fabric 4.4.0 to JSON test

by Steve Eberhardt

HTML

<script src="https://rawgit.com/fabricjs/fabric.js/master/dist/fabric.js"></script>
<canvas id="c1"></canvas>
<button id="loadJSON">Load from JSON to canvas2</button>
<canvas id="c2"></canvas>

CSS

canvas {
  border: 1px solid #999;
}

JavaScript

console.log(fabric.version);
// Canvas 1
var canvas = new fabric.Canvas('c1', {
  width: 500,
  height: 300,
  backgroundColor: '#ffffff',
});
// Canvas 2
var canvas2 = new fabric.Canvas('c2', {
  width: 500,
  height: 300,
  backgroundColor: '#f9fc82',
});

const Text = new fabric.Text('ONE two Three FOUR', {
  fontSize: 30,
  charSpacing: 0,
  fontWeight: 'bold',
  textAlign: 'right',
  pathStartOffset: 40,
  originX: 'center',
  originY: 'center',
  top: canvas.getHeight() * 0.5,
  left: canvas.getWidth() * 0.5,
  id: 'driversname',
});

const Text2 = new fabric.Text('ONE two Three FOUR', {
  fontSize: 30,
  charSpacing: 0,
  fontWeight: 'bold',
  textAlign: 'right',
  originX: 'center',
  originY: 'center',
  top: canvas.getHeight() * 0.75,
  left: canvas.getWidth() * 0.5,
  id: 'driversname',
});

// Create a path based on the length of the Text.
const textLength = Text.measureLine(0);

const angle = 100;
const shapeString = `m 0 0 a ${angle} ${angle} 0 0 1 ${textLength.width} 0`;

const textPath = new fabric.Path(shapeString);
// Set the path
Text.set('path', textPath);

// Add to canvas.
canvas.add(Text);
canvas.add(Text2);

$('#loadJSON').on('click', function () {
  canvas2.loadFromJSON(canvas.toJSON(), canvas2.renderAll.bind(canvas2));
});