JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>

CSS

canvas { 
    float: left;
    max-width: 50%;
}

JavaScript

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    img = new Image();

img.addEventListener('load', function () {
    canvas.width = this.width;
    canvas.height = this.height;
    ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
    oilPaintEffect(canvas, 5, 55);
});

img.crossOrigin = "Anonymous";
img.src = "http://lorempixel.com/300/600/sports";

function oilPaintEffect(canvas, radius, intensity) {
    var width = canvas.width,
        height = canvas.height,
        imgData = ctx.getImageData(0, 0, width, height),
        pixData = imgData.data,
        destCanvas = document.createElement("canvas"),
        dCtx = destCanvas.getContext("2d"),
        pixelIntensity = [],
        sumR = [],
        sumG = [],
        sumB = [],
        pixelIntensityCount = [];
    
    destCanvas.width = width;
    destCanvas.height = height;
    
    document.body.appendChild(destCanvas);
    
    var destImageData = dCtx.createImageData(width, height),
        destPixData = destImageData.data,
        intensityLUT = [],
        rgbLUT = [];
    
    for (var y = 0; y < height; y++) {
        intensityLUT[y] = [];
        rgbLUT[y] = [];
        for (var x = 0; x < width; x++) {
            var idx = (y * width + x) * 4,
                r = pixData[idx],
                g = pixData[idx + 1],
                b = pixData[idx + 2],
                avg = (r + g + b) / 3;
            
            intensityLUT[y][x] = Math.round((avg * intensity) / 255);
            rgbLUT[y][x] = {
                r: r,
                g: g,
                b: b
            };
        }
    }
    
    
    for (y = radius; y < height - radius; y++) {
        for (x = radius; x < width - radius; x++) {
            
            pixelIntensity = [];
            sumR = [];
            sumG = [];
            sumB = [];
            pixelIntensityCount = [];
            
            for (var yy = -radius; yy <= radius; yy++) {
                for (var xx =...