fabric.js test

by yasumodev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
<canvas id="my_canvas" width="800" height="800"></canvas>

JavaScript

var canvas = new fabric.Canvas('my_canvas');
canvas.isDrawingMode = true;
canvas.on("path:created", function(e){
  //alert("path:created");
  //opt.path.id = fabric.Object.__uid++
  var path = e.path;
  path.path.push(["z"]);
  clip_path = path;
  img_main.set({
    clipTo: function (ctx) {
    	//alert("clipTo");
      //ctx.arc(0, 0, 400, 0, Math.PI * 2, true);
      //path.objectCaching = false;
      clip_path.objectCaching = false;
      clip_path.render(ctx);
      //clip_ctx = ctx;
      //img_main.render(ctx);
    }
  });
  //img_main.render(clip_ctx);
  //img_main.renderAll();
  //alert(JSON.stringify(path.path));
  /*
  img_main.set({
  	left:0,
    top :0,
    clipTo: function (ctx) {
      //ctx.arc(0, 0, 400, 0, Math.PI * 2, true);
      path.objectCaching = false;
      path.path.push(["z"]);
      path.render(ctx);
    }
  });
  */
});

var img_main;
var img_url = 'https://stat.ameba.jp/user_images/20161009/02/souther7/78/8c/j/o0480064113768147224.jpg';
//var clip_path = new fabric.Path('M -400 -400 L -200 300 L 500 0 z');
var clip_path = null;
var clip_ctx;
fabric.Image.fromURL(img_url, function(img) {
	img.scale(0.6);
  img.set({
  	left:0,
    top :0,
    /*
    clipTo: function (ctx) {
    	//alert("clipTo");
      //ctx.arc(0, 0, 400, 0, Math.PI * 2, true);
      //path.objectCaching = false;
      clip_path.objectCaching = false;
      clip_path.render(ctx);
      clip_ctx = ctx;
    }
    */
  });
  img_main = img;
  /*
  img.clipPath = new fabric.Circle({
    radius: 40,
    top: -40,
    left: -40
  });
  */
  canvas.add(img);
});

/*
// create a rectangle object
var rect = new fabric.Rect({
  left:   100,
  top:    100,
  fill:   '#f90',
  width:  30,
  height: 30,
});
canvas.add(rect);
*/