toJSON examples

Used in documentation (jsdoc tag)

HTML

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

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

// Do some initializing stuff
/* fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(255,153,255,0.5)',
    cornerSize: 12,
    padding: 5,
    originX: 'center',
    originY: 'center',
    snapAngle: 90
}); */

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

var body = document.querySelector('body');

body.addEventListener('keydown', function(e) {
	var fabricObjects = canvas.getActiveObjects();
  if (fabricObjects && e.shiftKey) {
  	fabricObjects.forEach(function(o){
    	o.snapAngle = 15;
    })
  }
});
body.addEventListener('keyup', function(e) {
	var fabricObjects = canvas.getActiveObjects();
  if (fabricObjects && !e.shiftKey) {
  	fabricObjects.forEach(function(o){
    	o.snapAngle = 0;
    })
  }
});

canvas.on('object:rotating', function(options) {  
  console.log(options.target.angle);
  	var fabricObjects = canvas.getActiveObjects();
    	fabricObjects.forEach(function(o){
    	o.snapAngle = 90;
    })
});




fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(myImg) {
 //i create an extra var for to change some image properties
 var img1 = myImg.set({ left: 150, top: 150 ,width:150,height:150});
 canvas.add(img1); 
});