fabric 2.4 to JSON test

by uemon

HTML

<script src="https://rawgit.com/fabricjs/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="c1"></canvas>

CSS

canvas {
  border: 1px solid #999;
}

JavaScript

(function() {
    
 
 var canvas = new fabric.Canvas('c1',{
  	width:500,
    height:300, 
  });
  var canvas2 = new fabric.Canvas('c2',{
  	width:500,
    height:300,
  });


	var clipping_obj = new fabric.Rect({ 
  		width: 100, 
      height:100, 
      top: 100, 
      left: 300, 
      fill: '#aaaaaa', 
      absolutePositioned: true, 
      clip_id: 'abc',
  });
  canvas.add(clipping_obj);
  
 
  var triangle = new fabric.Triangle({
            width: 150,
            height: 150,
            fill: '#DDD',
            clipId: 'xyz',
            objectCaching: true,
            customName: 'layout',
            absolutePositioned: true,
        });
canvas.add(triangle);
                        
                        
  fabric.Image.fromURL('http://fabricjs.com/assets/dragon2.jpg', function(img) {
  	var clipped_img = img.set({
    	clipPath:clipping_obj,
      scaleX: 0.2,
      scaleY:0.2,
      left: 300,
      clip_target : 'abc',
    })
    canvas.add(clipped_img);      
  });

  fabric.Image.fromURL('http://fabricjs.com/assets/dragon2.jpg', function(img) {
  	var clipped_img = img.set({
    	clipPath:triangle,
      scaleX: 0.2,
      scaleY:0.2,
      clip_target : 'xyz',
    })
    canvas.add(clipped_img);      
  });

var hline = new fabric.Line([ 250, 125, 250, 175 ],{
       
        stroke: '#333333',
        fill: '#333333',
        //strokeDashArray: [10, 2],
        strokeWidth: 5,
        lockMovementX: true,
        lockScalingX: true,
        lockScalingY: true,
        lockScalingFlip: true,
        lockRotation: true,
        lockSkewingX: true,
        lockSkewingY: true,
        selectable: true,
        hasControls : false,
        hasBorders: false,
        id: 'hruler',
    });
    canvas.add(hline);



 
 
  
})()