JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width='120' height='120' id='canvas' style='border: 1px solid #aaa'></canvas>

<button id='step' type='button'>Start</button>
<canvas width='120' height='120' id='result' style='border: 1px solid #aaa'></canvas>

JavaScript

$( function () {
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  var canvas2 = document.getElementById('result');
  var context2 = canvas2.getContext('2d');

  var imageObj = new Image();

//var resultImageData = canvas2.createImageData(120, 120);

  imageObj.onload = function() {
    context.drawImage(imageObj, 0,0);
  };
  imageObj.src = 'http://i.imgur.com/c9xVzua.png';
  imageObj.crossOrigin = "Anonymous";
  var imageData = imageObj.data;

  function setPixel(imageData, x, y, r, g, b, a) {
    //index = (x + y * imageData.width) * 4;
    // 
    context2.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
    context2.fillRect( x, y, 1, 1 );
     context2.stroke(); 
  }

  function getPixel(imageData, x,y) {
    //index = (x + y * imageData.width) * 4;
    var d= context.getImageData(x,y,1,1).data;
    return {
      r: d[0],
      g: d[1],
      b: d[2],
      a: d[3]
    }
  }

  var BLUR_MATRIX_RADIUS=3;
  var divider = (BLUR_MATRIX_RADIUS*2+1) * (BLUR_MATRIX_RADIUS*2+1); // For example Matrix 5x5 will make sum of neighbours/25
  $('button').click( function() {

    // Iterate throught each pixel of original image
    for(var i = 0; i< 120; i+=1) {
      for(var j = 0; j<120;j+=1) {

        var px = getPixel(imageData,i,j);
        var sum = {r:0,g:0,b:0,a:0};
        var allZero = true; // check if all alpha= 100%;
        var allMax = true; // check if all alpha=100%
        var counter = 0;
        var counterAlpha = 0;
        for(var k = -BLUR_MATRIX_RADIUS; k <= BLUR_MATRIX_RADIUS; k+=1) {
          var cx = i + k;
          if(cx<0||cx>119) continue;
          for(var l = -BLUR_MATRIX_RADIUS; l <= BLUR_MATRIX_RADIUS; l+=1) {
            var cy = j + l;
            if(cy<0||cy>119) continue;
            counterAlpha +=1;
            cpx = getPixel(imageData,cx,cy);
//if(cx==60 && cy==60)console.log(cpx);
            sum.a += cpx.a;
            if(cpx.a>0) {
              counter += 1;
              sum.r...