JSFiddle - React, Tailwind, and code Playground

HTML

<img...

JavaScript

Filters = {};

Filters.getCanvas = function(w, h) {
    var c = document.createElement("canvas");
    c.width = w;
    c.height = h;
    return c;
}

Filters.getPixels = function(img) {
    var c = this.getCanvas(img.width, img.height);
    var ctx = c.getContext('2d');
    ctx.drawImage(img, 0, 0);
    return ctx.getImageData(0, 0, c.width, c.height);
}

Filters.filterImage = function(img, filter) {
    var pixels = this.getPixels(img);
    if(this.hasOwnProperty(filter) && typeof this[filter] === "function") {
        pixels = this[filter](pixels);
    }
    
    var outputCanvas = this.getCanvas(img.width, img.height);
    var outputCtx = outputCanvas.getContext("2d");
    outputCtx.putImageData(pixels, 0, 0);
    var outputData = outputCanvas.toDataURL();
    this.outputImage(outputData);
}

Filters.outputImage = function(dataURL) {
    var outImg = new Image();
    outImg.src = dataURL;
    document.body.appendChild(outImg);
};

Filters.onlyRed = function(pixels) {
    var d = pixels.data;
    for(var i = 0; i < d.length; i+=4) {
        d[i]  = d[i]; // Red
        d[i+1] = 0;   // Green
        d[i+2] = 0;   // Blue
    }
    
    pixels.data = d;
    return pixels;
}

Filters.filterImage(document.getElementById("img"), "onlyRed");