fabric JS Clipping demo

Hey folks. There's a nice clipping demo made with Kinetic. Would love to see someone make this in Fabric, for comparison

by Deepak Kumar

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.2.min.js"></script>
<div id="container">  </div>
<div id="debug">debug</div>

JavaScript

(function() {

	var debug;
	function loadImages(sources, callback) {
		var images = {};
		var loadedImages = 0;
		var numImages = 0;
		// get num of sources
		for (var src in sources) {
			numImages++;
		}
		for (var src in sources) {
			images[src] = new Image();
			images[src].onload = function() {
				if (++loadedImages >= numImages) {
					callback(images);
				}
			};
			images[src].src = sources[src];
		}
	}

	function debug(txt) {
		debugdiv.html("<p>" + txt + "</p>")
	}

	function debug_append(txt) {
		debugdiv.append("<p>" + txt + "</p>")
	}

	function addCircle(layer, images) {
		var circle = new Kinetic.Circle({
			x : 100,
			y : 100,
			radius : 100,
			//fill: 'blue',
			stroke : 'black',
			strokeWidth : 4,
			fillPatternImage : images.color,
			fillPatternOffset : [-220, 70],
			draggable : true
		});
		//layer.add(circle);
		return circle;
	}

	function getMousePosition(stage) {
		var mouse = stage.getMousePosition(), touch = stage.getTouchPosition();
		if (touch) {
			if (touch.x >= 0 && touch.y >= 0) {
				return touch;
			}
		}
		if (mouse) {
			if (mouse.x >= 0 && mouse.y >= 0) {
				return mouse;
			}
		}
		return {
			x : 0,
			y : 0
		};
	}

	var onMove;
	function draw(images) {

		var stage = new Kinetic.Stage({
			container : 'container',
			width : 1024,
			height : 483
		}), bn_layer = new Kinetic.Layer(), color_layer = new Kinetic.Layer(), circle_layer = new Kinetic.Layer(), bn = new Kinetic.Image({
			x : 0,
			y : 0,
			image : images.bn,
			width : 1024,
			heigth : 483
		}), tmp_circle = null, movable = false;
		bn_layer.add(bn);
		tmp_circle = addCircle(circle_layer, images);

	 	var	onMove = function() {
			
			if (movable) {
				var pos = getMousePosition(stage);
				circle_layer.draw();
				tmp_circle.remove();

				tmp_circle.setPosition(pos.x, pos.y)
				tmp_circle.setFillPatternImage(images.color);
				tmp_circle.setFillPatternOffset(pos.x, pos.y);
				circle_layer.add(tmp_circle);
			}
		}
		stage.on("mousemove touchmove",...