JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://rawgithub.com/kangax/fabric.js/master/dist/all.js"></script>
<canvas id="c" width="1024" height="483"></canvas>

JavaScript

var urlImage01 = 'https://c2.staticflickr.com/2/1474/24133919290_4671f68fab_z.jpg';
var urlImage02 = 'https://c2.staticflickr.com/2/1474/24133919290_4671f68fab_z.jpg';
var radius = 100;
var canvas = new fabric.Canvas('c', {
    selection: false
});
var image;

fabric.Image.fromURL(urlImage01, function (img) {
    img.set({
        left: 512,
        top: 242,
        selectable: false
    });
    canvas.add(img);
});

canvas.renderAll();

fabric.Image.fromURL(urlImage02, function (img) {
    image = img.set({
        left: 512,
        top: 242,
        selectable: false
    });
});

function clipTo(ctx, evt) {
    var point = canvas.getPointer(evt.e);
    ctx.arc(point.x - (canvas.width / 2), point.y - (canvas.height / 2), radius, 0, Math.PI * 2, true);
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#000000';
    ctx.stroke();
}

function makeMask(evt) {
    canvas.add(image);
    image.clipTo = function (ctx) {clipTo(ctx, evt)};
    canvas.renderAll();
}

function clearMask(evt) {
    image.clipTo = function (ctx) {
        ctx.rect(-(canvas.width / 2), -(canvas.height / 2), canvas.width, canvas.height, true);
    };
    canvas.remove(image);
    canvas.renderAll();
}

function moveMask(evt) {
    image.clipTo = function (ctx) {clipTo(ctx, evt)};
    canvas.renderAll();
}

canvas.on("mouse:down", makeMask);
canvas.on("mouse:up", clearMask);
canvas.on("mouse:move", moveMask);