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

var img = new Image();
img.crossOrigin = "anonymous";
img.onload = start;
img.src = "test3.png";

function start() {
  ctx.drawImage(img, 0, 0);
  // shift blueish colors to greenish colors
  Maketransparent();
}

function Maketransparent() {

var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imgData.data;

for (var i = 0; i < data.length; i += 4) {
    red = data[i + 0];
    green = data[i + 1];
    blue = data[i + 2];
    alpha = data[i + 3];

    // skip transparent/semiTransparent pixels
    if (alpha < 200) {
        continue;
    }

    var hsl = rgbToHsl(red, green, blue);
    var hue = hsl.h * 360;
    var sat = hsl.s * 100;
    var lig = hsl.l * 100;

    // change blueish pixels to the new color
     if (hue < 10 && hue > 320) {
        var newRgb=hslToRgb(hsl.h,hsl.s,hsl.l);
        data[i + 0] = newRgb.r;
        data[i + 1] = newRgb.g;
        data[i + 2] = newRgb.b;
        data[i + 3] = 0;
    }
}
ctx.putImageData(imgData, 0, 0);
}