JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<canvas id="canvas" width=300 height=300></canvas>

CSS

body {
    background-color: ivory;
}
canvas {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var overlayImage;

var img = new Image();
img.crossOrigin = "anonymous";
img.onload = start;
img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/temp3.png";

function start() {

    canvas.width = img.width;
    canvas.height = img.height;

    // get a new canvas drawn with the existing img
    // but with the black pixels made transparent
    overlayImage = makeImageTransparentByColor(img, 0, 20, 0, 20, 0, 20);

    // draw the original image
    ctx.drawImage(img, 0, 0);

    // draw some test shapes
    ctx.fillStyle = "red";
    for (var y = 0; y < canvas.height; y += 19) {
        ctx.fillRect(0, y, canvas.width, 5);
    }

    // draw the transparent overlay on top
    ctx.drawImage(overlayImage, 0, 0);

}

function makeImageTransparentByColor(image, r1, r2, g1, g2, b1, b2) {
    // create a temporary canvas and draw the image on the canvas 
    var bk = document.createElement("canvas");
    var bkCtx = bk.getContext("2d");
    bk.width = image.width;
    bk.height = image.height
    bkCtx.drawImage(image, 0, 0);
    // get the pixel array from the canvas
    var imgData = bkCtx.getImageData(0, 0, bk.width, bk.height);
    var data = imgData.data;
    // loop through each pixel and make every pixel transparent
    // that is between r1-r2, g1-g2 and b1-b2
    for (var i = 0; i < data.length; i += 4) {
        var r = data[i];
        var g = data[i + 1];
        var b = data[i + 2]
        if (r >= r1 && r <= r2 && g >= g1 && g <= g2 && b >= b1 && b <= b2) {
            data[i] = 0;
            data[i + 1] = 0;
            data[i + 2] = 0;
            data[i + 3] = 0;
        }
    }
    // put the modified pixels back on the canvas
    bkCtx.putImageData(imgData, 0, 0);
    // return the canvas with transparent image
    return (bk);
}