loadFromJSON examples

Used in documentation (jsdoc tag)

by Steve Eberhardt

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

// Do some initializing stuff
fabric.Object.prototype.set({
  transparentCorners: false,
  cornerStrokeColor: '#ffffff',
  cornerColor: 'rgba(153,177,255,0.75)',
  cornerStyle: 'circle',
  cornerSize: 18,
  noScaleCache: false,
  lockSkewingX: true,
  lockSkewingY: true,
  originX: "center",
  originY: "center",
  perPixelTargetFind: false,
  strokeUniform: true,
  activeOn: 'up'
});

fabric.Canvas.prototype.set({
  preserveObjectStacking: true,
  backgroundColor: '#ffffff',
  //uniScaleTransform: false,//removed in 4.0
  uniformScaling: true,
  controlsAboveOverlay:true,
  stopContextMenu: false,
  fireRightClick: true,
  allowTouchScrolling: true,
  targetFindTolerance: 10
  //centeredKey: null
});


//overrides clipping behavior for stroked clippaths (for drawing bleed) 
fabric.Object.prototype.drawObject = function(ctx, forClipping) {
  var originalFill = this.fill, originalStroke = this.stroke;
  if (forClipping) {
    this.fill = 'black';
    this.stroke = 'black';
    this._setClippingProperties(ctx);
  }
  else {
    this._renderBackground(ctx);
    //this._setStrokeStyles(ctx, this);
    //this._setFillStyles(ctx, this);
  }
  this._render(ctx);
  this._drawClipPath(ctx);
  this.fill = originalFill;
  this.stroke = originalStroke;
}


// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

var json = '{"objects":[{\"type\":\"rect\",\"version\":\"4.3.0\",\"originX\":\"center\",\"originY\":\"center\",\"left\":283.5,\"top\":191.5,\"width\":150,\"height\":150,\"fill\":{\"type\":\"linear\",\"coords\":{\"x1\":0,\"y1\":0,\"x2\":1,\"y2\":0},\"colorStops\":[{\"offset\":\"0\",\"color\":\"rgba(0, 0, 0,...