Place image to alpha channels in canvas

[alperxx]

Stackoverflow link:
https://stackoverflow.com/questions/53419584/place-image-to-alpha-channels-in-canvas
http://jsfiddle.net/alperxx/t521jra4/ (fiddle)
https://tablom34.com/collage/upload (live demo)

I need to find top, left, max width and max height values of all alpha channels in canvas.
I have 4 transparent place in canvas in live url. but i can't detect true places. First alpha channel corners colour must be red. Next is: black, yellow and green. But my groups is not correct.
If I complete the groups truely, every uploading photos will place to alpha places.

My Processes are in comment.

`
function alphaRatio(ctx) {
var pixelData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
const data = pixelData.data;
const pixel_groups = [];

  var total = 0;
  for (let i = 0, dx = 0; dx < data.length; i++, dx = i << 2) {
    if (data[dx + 3] == 0) {
      //First, I'm catching all transparent pixels.
      total++;
      var x = (dx / 4) % ctx.canvas.width;
      var y = ~~((dx / 4) / ctx.canvas.width);

      // if pixel after a last grouped item add to in.
      var found = false;
      if (pixel_groups.length) {
        for (im = 0; im < pixel_groups.length; im++) {
          last_pixels = pixel_groups[im][pixel_groups[im].length - 1];
          if (
            last_pixels.x + 1 == x || last_pixels.x - 1 == x ||
            last_pixels.y + 1 == y || last_pixels.y - 1 == y
          ) {
            found = true;
            pixel_groups[im].push({
              x: x,
              y: y
            });
            break;
          }
        }
      }
      if (!found) {
        pixel_groups.push([{
          x: x,
          y: y
        }]);
      }
    }
  }

  // i grouped all them
  if (pixel_groups.length) {
    console.debug(pixel_groups);
    for (i = 0; i < pixel_groups.length; i++) {
      var alphawidth = {};
      var alphaheight = {};
      for (im = 0; im < pixel_groups[i].length; im++) {
        //now lets calculate first pixel left and top for width and height 
        if (typeof(alphawidth['min']) === 'undefined') {
          alphawidth['min'] = pixel_groups[i][im].x;
          alphawidth['max'] = pixel_groups[i][im].x;
        } else {
          if (pixel_groups[i][im].x < alphawidth['min']) {
            alphawidth['min'] = pixel_groups[i][im].x;
          }
          if (pixel_groups[i][im].x > alphawidth['max']) {
            alphawidth['max'] = pixel_groups[i][im].x;
          }
        }

        if (typeof(alphaheight['min']) === 'undefined') {
          alphaheight['min'] = pixel_groups[i][im].y;
          alphaheight['max'] = pixel_groups[i][im].y;
        } else {
          if (pixel_groups[i][im].y < alphaheight['min']) {
            alphaheight['min'] = pixel_groups[i][im].y;
          }
          if (pixel_groups[i][im].y > alphaheight['max']) {
            alphaheight['max'] = pixel_groups[i][im].y;
          }
        }
      }

      // update group key for only x y w h
      pixel_groups[i] = {
        x: pixel_groups[i][0].x,
        y: pixel_groups[i][0].y,
        w: alphawidth['max'] - alphawidth['min'],
        h: alphaheight['max'] - alphaheight['min']
      };
    }

    // for test alpha places put a colour all corners 
    for (i = 0; i < pixel_groups.length; i++) {
      var colour = ['red', 'black', 'yellow', 'green'];
      canvas.add(new fabric.Circle({
        left: pixel_groups[i].x,
        top: pixel_groups[i].y,
        radius: 4,
        fill: colour[i],
        originX: 'center',
        originY: 'center',
        hasControls: false
      }));
      canvas.add(new fabric.Circle({
        left: pixel_groups[i].x + pixel_groups[i].w,
        top: pixel_groups[i].y + pixel_groups[i].h,
        radius: 4,
        fill: colour[i],
        originX: 'center',
        originY: 'center',
        hasControls: false
      }));
      canvas.add(new fabric.Circle({
        left: pixel_groups[i].x + pixel_groups[i].w,
        top: pixel_groups[i].y,
        radius: 4,
        fill: colour[i],
        originX: 'center',
        originY: 'center',
        hasControls: false
      }));

      canvas.add(new fabric.Circle({
        left: pixel_groups[i].x,
        top: pixel_groups[i].y + pixel_groups[i].h,
        radius: 4,
        fill: colour[i],
        originX: 'center',
        originY: 'center',
        hasControls: false
      }));

    }

    return pixel_groups;
  }
  return false;
}`

If any one has a another way, please share. I lost 4 days.