JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

// canvas

let canvas = new fabric.Canvas("canvas", {
  backgroundColor: "lightgray",
  width: 1280,
  height: 720,
  preserveObjectStacking: true,
  selection: false
});

canvas.isDrawingMode = true;
canvas.freeDrawingBrush.color = "black";
canvas.freeDrawingBrush.width = 2;

canvas.on("path:created", function(options) {
   clip(options.path);
});

function clip(path) {
	path.set({pathOffset: {x: 0, y: 0}});
  object.set({
    clipTo: function(ctx) {
    	var retina = this.canvas.getRetinaScaling();
    	ctx.save();    
      ctx.setTransform(retina,0,0,retina,0,0);
    	ctx.beginPath();
    	path._renderPathCommands(ctx);
    	ctx.restore();
    }
  });

  canvas.requestRenderAll();

}

// image

let image = new Image();
let object;

image.onload = function() {

  object = new fabric.Image(image, {
    width: 500,
    height: 500,
    top: 50,
    left: 50
  });
  object.globalCompositeOperation = 'source-atop';
  canvas.add(object);

};

image.src = "http://i.imgur.com/8rmMZI3.jpg";