JSFiddle - React, Tailwind, and code Playground

by Milan Gladiš

HTML

<canvas id="main" width="512" height="512"></canvas>
<img id="image" style="display:none;"...

CSS

img {
  display: none
}

JavaScript

var canvas = document.getElementById('main');
var ctx = document.getElementById('main').getContext('2d');
var tile = new Image();
tile.src = document.getElementById('image').src;
tile.onload = function() {
	draw(tile);
}

function draw(img) {
	var buffer = document.createElement('canvas');
  var bufferctx = buffer.getContext('2d');
  bufferctx.drawImage(img, 0, 0);
  var imageData = bufferctx.getImageData(0,0,buffer.width,  buffer.height);
  var data = imageData.data;
  var removeBlack = function() {
    for (var i = 0; i < data.length; i += 4) {
      if(data[i]+ data[i + 1] + data[i + 2] < 10){ 
      	data[i + 3] = 255; // alpha
       } else {
         data[i+1] = 0;
        data[i+2] = 0;
        data[i+3] = 0;
       }
    }
    ctx.putImageData(imageData, 0, 0);
  };
  removeBlack();
}