JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div>
    <pre>100</pre>
    <canvas id="c" width="400" height="400"></canvas>
  </div>
</body>

CSS

#c {
  border: 1px solid;
}
body{
   background: lightcoral;
}

JavaScript

var ctx = "";
var img = "";
init();
var log = document.querySelector('pre');
function get_cleared(ctx) {
  var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
  var trans = 0;
  for (var i = 0; i < imageData.data.length; i += 4) {
    if (imageData.data[3 + i] === 0) {
      trans++
    }
  }
  var percent = (trans / (imageData.data.length / 4)) * 100;
  log.textContent = percent;
}

function init() {
  var canvas = document.getElementById('c');
  ctx = canvas.getContext('2d');

  img = new Image();

  img.onload = function() {
    ctx.drawImage(img, 0, 0);
    ctx.globalCompositeOperation = 'destination-out';
  }
  img.crossOrigin = 'anonymous';
  img.src = "https://dl.dropboxusercontent.com/s/te5g7s1lh122quy/1024px-Levanne_%2814282259549%29.jpg?dl=0";

  function drawPoint(pointX, pointY) {
    var grd = ctx.createRadialGradient(pointX, pointY, 0, pointX, pointY, 50);
    grd.addColorStop(0, "rgba(255,255,255,0.6)");
    grd.addColorStop(1, "transparent");
    ctx.fillStyle = grd;
    ctx.beginPath();
    ctx.arc(pointX, pointY, 50, 0, Math.PI * 2, true);
    ctx.fill();
  }


  var mouseHandler = throttle(function(evt) {
    var x, y;
    switch(evt.type) {
      case 'touchstart':
        x = evt.touches[0].screenX;
        y = evt.touches[0].screenY;
        break;
      case 'touchmove':
        evt.preventDefault();
        x = evt.touches[0].screenX;
        y = evt.touches[0].screenY;
        break;
      case 'mousemove':
        evt.preventDefault();
        x = evt.clientX;
        y = evt.clientY;
        break;
    }
    drawPoint(x - canvas.offsetLeft, y - canvas.offsetTop);
    get_cleared(ctx);
  });
  canvas.addEventListener('touchstart', mouseHandler, false);
  canvas.addEventListener('touchmove', mouseHandler, false);
  canvas.addEventListener('mousemove', mouseHandler, false);
}

function throttle(callback) {
  var active = false; // a simple flag
  var evt; // to keep track of the last event
  var handler =...