JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<input type="file" id="inputFile">
    
    Sharpen: <input type=range id=mix min=0 max=100 value=20 onchange="update(this)">   
    <img id="img" /> 
<br>
<canvas id="canvas">
<br>canvas
<br>
<canvas id="canvas2">

CSS

#img {
    border: 1px solid green;
}

#canvas {
    border: 1px solid blue;
}

JavaScript

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

var offScreen = document.createElement('canvas'),
    offctx = offScreen.getContext('2d');

var canvas2 = document.getElementById("canvas2"),
    ctx2 = canvas2.getContext("2d");



/// as we need pixel access to apply convolution we
/// need to get around CORS:
image.crossOrigin = 'anonymous';

image.onload = resize;

$("#inputFile").on("change", function () {
    var inputFile = $("#inputFile")[0];
    var myFile = inputFile.files[0];

    var _URL = window.URL || window.webkitURL;

    image.src = _URL.createObjectURL(myFile);
});


sharpenCanvas = function (cv, mix, opaque) {
    
    var ctx = cv.getContext("2d");
    var pixels = ctx.getImageData(0, 0, cv.width, cv.height);
    var weights = [0, -1, 0, -1, 5, -1, 0, -1, 0];
    var side = Math.round(Math.sqrt(weights.length));
    var halfSide = Math.floor(side / 2);
    var src = pixels.data;
    var sw = pixels.width;
    var sh = pixels.height;
    // pad output by the convolution matrix
    var w = sw;
    var h = sh;
    //var output = Filters.createImageData(w, h);
    
    var tmpCv = document.createElement('canvas'),
        tmpCtx = tmpCv.getContext('2d');
    var output = tmpCtx.createImageData(w, h);
        
    var dst = output.data;
    // go through the destination image pixels
    var alphaFac = opaque ? 1 : 0;
    for (var y = 0; y < h; y++) {
        for (var x = 0; x < w; x++) {
            var sy = y;
            var sx = x;
            var dstOff = (y * w + x) * 4;
            // calculate the weighed sum of the source image pixels that
            // fall under the convolution matrix
            var r = 0,
                g = 0,
                b = 0,
                a = 0;
            for (var cy = 0; cy < side; cy++) {
                for (var cx = 0; cx < side; cx++) {
                    var scy = sy + cy - halfSide;
             ...