JSFiddle - React, Tailwind, and code Playground

by Andrew Maestro

HTML

<img src="https://i.imgur.com/8Z3rrdh.jpg" class="mySelector" data-mask="https://i.imgur.com/R0YrumD.png" />
<br>
<br><br><br>

CSS

img {
  background-color: red;
}
canvas {
  width: 100%;
  height: 100%;
}

JavaScript

function isCanvasSupported() {
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}
if (isCanvasSupported()) {
  (function($) {
    var $_count_id = 0;

    $.fn.imageMask = function(_mask, _callback, _resize) {
      if (_mask == undefined) {
        console.error("imageMask: undefined mask");
        return false;
      }
      if (!this.is("img")) {
        console.error("imageMask: jQuery object MUST be an img element");
        return false;
      }
      if ((_callback != undefined) && (!$.isFunction(_callback))) {
        console.error("imageMask: callback MUST be function");
        return false;
      }

      //create mask object
      var maskObj = null;
      if (_mask.src) {
        maskObj = _mask;
      } else {
        maskObj = new Image();
        maskObj.crossOrigin = "Anonymous";
        maskObj.src = _mask;
      }

      var obj = this;
      obj.css("visibility", "hidden");

      $(maskObj).on('load', function() {
        var $maskData = null;
        obj.each(function() {
          //reset
          var $image = $(this),
            $canvasObj = null;

          //Create canvas
          $canvasObj = createCanvas(this, maskObj, _resize)[0];
          var ctx = $canvasObj.getContext("2d");


          //reRender image
          var img = new Image();
          img.crossOrigin = "Anonymous";
          img.src = $(this).attr('src');
          $(img).on('load', function() {
            $maskData = get_maskData($canvasObj, ctx, maskObj);
            drawImg($canvasObj, ctx, img);
            //Applying mask
            applyMask($canvasObj, ctx, $maskData);

            //removing original image
            $image.remove();

            //callback
            if ($.isFunction(_callback)) {
              _callback($canvasObj);
            }
          });
        });
      });

      return this;
    };

    function createCanvas(img, mask, _resize) {
      var $imagewidth = mask.width;
     ...