Haar wavelet result colors are messed up

Question

I tried adjusting this code of Haar wavelet transform to work with OpenCV.js. The recursion works fine but the colors of the resulting image are all messed up. Here's a screenshot of my results:

Here's what the output should look like:

And here's my code:

function OneDHaarTransform(HaarMatrix) 
{
  var sum = 0;
  var diff = 0;
  var hMLen = HaarMatrix.length/2;
  var tempHaar = [];
  //It only recurses on first half of the array
  for (var i = 0; i < hMLen; i++) 
  {
    sum = HaarMatrix[2*i] + HaarMatrix[2*i + 1];
    sum = sum / Math.sqrt(2);
    diff = HaarMatrix[2*i] - HaarMatrix[2*i + 1];
    diff = diff / Math.sqrt(2);
    tempHaar[i] = sum;
    tempHaar[i + hMLen] = diff
  };
  for (var i = 0; i < HaarMatrix.length; i++) {
    HaarMatrix[i] = tempHaar[i];
  };
};

function haarTransform(img, MaxStepHaar) 
{
  var width = img.cols;
  var height = img.rows;
  var currWidth = width;
  var currHeight = height;
  let pix=img.clone();
  let altpix=[];
  var rowSize = width;
  var colSize = height;
  // var Haar = [];
  var Haar = createArray(height,width,3);
  var tempHaar = [];
  let dst = img.clone();

  //Initialize the Haar matrix
  for (var row = 0; row < height; row++) 
  {
    for (var col = 0; col < width; col++) {
      for (var i = 0; i < 3; i++) {
       let pixel = pix.ucharPtr(row,col);
       Haar[row][col][i] = pixel[i];
     };
   };
 };

  //Do a Haar Wavelet Transform
  while( (currWidth > 1 || currHeight > 1) && (MaxStepHaar > 1) ) 
  {
    MaxStepHaar = MaxStepHaar - 1;

      //Do it for each row first
      if (currWidth > 1) 
      {
        for(var row = 0; row < currHeight; row++)
        {
          for (var i = 0; i < 3; i++) {
            for(col = 0; col < currWidth; col++) {
              tempHaar[col] = Haar[row][col][i];
            };

            OneDHaarTransform(tempHaar);

            for(col = 0; col < currWidth; col++) {
              Haar[row][col][i] = tempHaar[col];
            };
          };
        };
      };
      //Then perform Haar transform on each column
      tempHaar = [];
      if (currHeight > 1) 
      {
        for(var col = 0; col < currWidth; col++)
        {
          for (var i = 0; i < 3; i++) {
            for(row = 0; row < currHeight; row++) {
              tempHaar[row] = Haar[row][col][i];
            };

            OneDHaarTransform(tempHaar);

            for(row = 0; row < currHeight; row++) {
              Haar[row][col][i] = tempHaar[row];
            };
          };
        };
      };
      tempHaar = [];

      if (currHeight > 1) {currHeight  = currHeight/2};
      if (currWidth > 1)  {currWidth = currWidth/2};
    };
  //Copy pix data to canvas
  for (var row = 0; row < height; row++) {
    for (var col = 0; col < width; col++) {
      pixel[0] = Haar[row][col][0];
      pixel[1] = Haar[row][col][1];
      pixel[2] = Haar[row][col][2];
      pixel[3] = 1;
    };
  };
  pix.delete();dst.delete();
};

I only changed it so the input and output would be Mat() objects. I've tried to see if the maximum value of the Mat() exceeds 255, but it doesn't. I don't know what went wrong, please help.