Fabric JS - Custom clip with watermark

Clipping in cusom area. Path used to set clip area. Watermark is circle, but could be anything you want.

by duckywang1

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.13/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>
<button id="clip">
Clip
</button>
<div>
<img id="output" alt="Output" />
</div>

CSS

canvas {
  outline: 2px solid black;
}

JavaScript

var c = new fabric.Canvas('c');

var clip = {
   left: 100,
   top: 100,
   right: c.getWidth() - 100,
   bottom: c.getHeight() - 100
}
var rb = new fabric.Path('M 0 0 H ' + c.getWidth() + ' V ' + clip.top + ' H ' + clip.left + ' V ' + clip.bottom + ' H ' + clip.right + ' V ' + clip.top + ' H ' + c.getWidth() + ' V ' + c.getHeight() + ' H 0 Z', {
   left: 0,
   top: 0,
   fill: 'rgba(255,255,0,0.3)'
});
var g = new fabric.Group([rb], {
   left: 0,
   top:...