Fabricjs Default Mask Filter

by codingdude

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>
<canvas width="600" height="400" id="c"></canvas>
<img style="display:none" src="https://i.postimg.cc/CLwnCFSK/k.jpg" id="image" crossorigin="anonymous">
<img style="display:none" src="https://i.postimg.cc/JnNTH15L/k-mask.jpg" id="mask" crossorigin="anonymous">

CSS

body{
  background:orange;
}

JavaScript

var canvas = new fabric.Canvas('c');
var img = document.getElementById('image');
var maskImg = document.getElementById("mask");

var imgInstance = new fabric.Image(img, {
  left: 100,
  top: 50,
  angle: 0,
  opacity: 1,
  scaleX:0.1,
  scaleY:0.1
});


var mask = new fabric.Image.filters.Mask({mask: maskImg});

imgInstance.filters.push(mask);
imgInstance.applyFilters(function(){
	canvas.add(imgInstance);
  canvas.renderAll();
})