fabrics collage

by SooChangLee

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<canvas id="canvas" width="600" height="600"></canvas>

<button id="btn_insert_image" type="button">Insert image &amp; Clip</button>

<p>
  Step1<br>
  Click 'Insert image &amp; Clip' button<br>
  <br>

  Step2<br>
  Image select&amp;drag<br>
  <br>
</p>

CSS

canvas {
    border: 1px solid #ccc;
}

JavaScript

var canvas;
var slot1, slot2, slot3, slot4, slot5, slot6;

var img01URL = 'http://mac.soochang.pe.kr/IMG_0234.JPG';
var img02URL = 'http://fabricjs.com/lib/pug.jpg';

$(document).ready(function(){
	make_collage_layout();
  
  $("#btn_insert_image").on("click", function(){
  	insert_image();
    
    $(this).attr("disabled", true);
    $("#btn_clip").attr("disabled", false);
  });  
  $("#btn_clip").on("click", function(){
    $(this).attr("disabled", true);
  });  
  
  insert_image();
});

function make_collage_layout(){
  canvas = new fabric.Canvas('canvas', {
    width: 500,
    height: 500,

    perPixelTargetFind:   true
  });

  slot1 = new fabric.Rect({
    left: 100,
    top: 25,
    width: 150,
    height: 150,
    /* fill: 'transparent', */
    /* stroke: 'gray', */
    /* strokeWidth: 1, */
    /* selectable: false, */
    /* evented: false, */
    /* objectCaching: false, */
    absolutePositioned: true,
    /* perPixelTargetFind:   true */
  });
  slot2 = new fabric.Rect({
    left: 250,
    top: 25,
    width: 150,
    height: 150,
     /* fill: 'transparent', */
    /* stroke: 'gray', */
    /* strokeWidth: 1, */
    /* selectable: false, */
    /* evented: false, */
    /* objectCaching: false, */
    absolutePositioned: true,
    /* perPixelTargetFind:   true */
  });
 
  /* canvas.add(slot1) */;
  /* canvas.add(slot2) */; 
}

function insert_image(){
  fabric.Image.fromURL(img01URL, function(img) {
    img.set({
      left: 100,
      top: 25,
      /* originX: 'left', */
      /* originY: 'top', */
      scaleX: 0.5,
      scaleY: 0.5,
      /* selectable: true, */
      objectCaching: false,
      /* absolutePositioned: true, */

    });

    canvas.add(img);

    img.clipPath = slot1;   
    
    canvas.renderAll();
  }, { crossOrigin: 'Anonymous' });
  
  fabric.Image.fromURL(img01URL, function(img) {
    img.set({
      left: 250,
      top: 25,
      /* originX: 'left', */
      /* originY: 'top', */
      scaleX: 0.5,
      scaleY: 0.5,
 ...