Step-down downsample + sharpen convolution

HTML

<input type="file" id="inputFile">
<br><br>

<div style="float:left;">
<canvas id="canvas" width=200 height=100></canvas>
<img width=200px src="http://i.imgur.com/DR94LKg.jpg">
<img id='testImageX' width=6000px src="http://i.imgur.com/DR94LKg.jpg">
<img id='testImage' width=200px src="https://i.stack.imgur.com/5x1UP.jpg">
<canvas id='cv' width=1060 height=3020></canvas>
</div>
<br>
Sharpen: <input type=range id=mix min=0 max=100 value=0 onchange="update()">

JavaScript

function p1() {
var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    offScreen = document.createElement('canvas'),
    offctx = offScreen.getContext('2d'),
    img = new Image();


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

/// when image is loaded step-down the downscaling
img.onload = resize;
img.src =// "http://i.imgur.com/JuJMPxs.png";
     "http://i.imgur.com/DR94LKg.jpg";

$("#inputFile").on("change", function() {
       var inputFile = $("#inputFile")[0];
    var myFile = inputFile.files[0];
    
    var _URL = window.URL || window.webkitURL;
 
    img.src = _URL.createObjectURL(myFile);
    
 
});



/// sharpen image:
/// USAGE:
///    sharpen(context, width, height, mixFactor)
///  mixFactor: [0.0, 1.0]
function sharpen(ctx, w, h, mix) {

    var weights = [0, -1, 0, -1, 5, -1, 0, -1, 0],
        katet = Math.round(Math.sqrt(weights.length)),
        half = (katet * 0.5) | 0,
        dstData = ctx.createImageData(w, h),
        dstBuff = dstData.data,
        srcBuff = ctx.getImageData(0, 0, w, h).data,
        y = h;

    while (y--) {

        x = w;

        while (x--) {

            var sy = y,
                sx = x,
                dstOff = (y * w + x) * 4,
                r = 0,
                g = 0,
                b = 0,
                a = 0;

            for (var cy = 0; cy < katet; cy++) {
                for (var cx = 0; cx < katet; cx++) {

                    var scy = sy + cy - half;
                    var scx = sx + cx - half;

                    if (scy >= 0 && scy < h && scx >= 0 && scx < w) {

                        var srcOff = (scy * w + scx) * 4;
                        var wt = weights[cy * katet + cx];

                        r += srcBuff[srcOff] * wt;
                        g += srcBuff[srcOff + 1] * wt;
                        b += srcBuff[srcOff + 2] * wt;
                        a += srcBuff[srcOff + 3] * wt;
      ...