Как сделать так, чтобы разные части холста (рект) исчезали в заданных парах координат?

Question

У меня проблема с созданием затухания частей холста. Я хочу сделать затухание в частях матрицы, учитывая массив координат, например [x, y, alpha].Я сделал такой код:

//Creo Canvas
var canvas=document.querySelector("#canvas");
var ctx = canvas.getContext("2d")

//creo una sfumatura lineare lungo y di 7 colori
var my_gradient = ctx.createLinearGradient(0,0,0,canvas.height);
my_gradient.addColorStop(1/7,"#C0392B");
my_gradient.addColorStop(2/7,"#9B59B6");
my_gradient.addColorStop(3/7,"#2980B9");
my_gradient.addColorStop(4/7,"#1ABC9C");
my_gradient.addColorStop(5/7,"#16A085");
my_gradient.addColorStop(6/7,"#F1C40F");
my_gradient.addColorStop(7/7,"#E67E22");
var matrix;

function createMatrix(){
  var stepx = canvas.width/12;
  var stepy = canvas.height/7;
  matrix = [[[0,0],[stepx,0],[stepx*2,0],[stepx*3,0],[stepx*4,0],[stepx*5,0],[stepx*6,0],[stepx*7,0],[stepx*8,0],[stepx*9,0],[stepx*10,0],[stepx*11,0]],
                [[0, stepy],[stepx,stepy],[stepx*2,stepy],[stepx*3,stepy],[stepx*4,stepy],[stepx*5,stepy],[stepx*6,stepy],[stepx*7,stepy],[stepx*8,stepy],[stepx*9,stepy],[stepx*10,stepy],[stepx*11,stepy]],
                [[0, stepy*2],[stepx,stepy*2],[stepx*2,stepy*2],[stepx*3,stepy*2],[stepx*4,stepy*2],[stepx*5,stepy*2],[stepx*6,stepy*2],[stepx*7,stepy*2],[stepx*8,stepy*2],[stepx*9,stepy*2],[stepx*10,stepy*2],[stepx*11,stepy*2]],
                [[0, stepy*3],[stepx,stepy*3],[stepx*2,stepy*3],[stepx*3,stepy*3],[stepx*4,stepy*3],[stepx*5,stepy*3],[stepx*6,stepy*3],[stepx*7,stepy*3],[stepx*8,stepy*3],[stepx*9,stepy*3],[stepx*10,stepy*3],[stepx*11,stepy*3]],
                [[0, stepy*4],[stepx,stepy*4],[stepx*2,stepy*4],[stepx*3,stepy*4],[stepx*4,stepy*4],[stepx*5,stepy*4],[stepx*6,stepy*4],[stepx*7,stepy*4],[stepx*8,stepy*4],[stepx*9,stepy*4],[stepx*10,stepy*4],[stepx*11,stepy*4]],
                [[0, stepy*5],[stepx,stepy*5],[stepx*2,stepy*5],[stepx*3,stepy*5],[stepx*4,stepy*5],[stepx*5,stepy*5],[stepx*6,stepy*5],[stepx*7,stepy*5],[stepx*8,stepy*5],[stepx*9,stepy*5],[stepx*10,stepy*5],[stepx*11,stepy*5]],
                [[0, stepy*6],[stepx,stepy*6],[stepx*2,stepy*6],[stepx*3,stepy*6],[stepx*4,stepy*6],[stepx*5,stepy*6],[stepx*6,stepy*6],[stepx*7,stepy*6],[stepx*8,stepy*6],[stepx*9,stepy*6],[stepx*10,stepy*6],[stepx*11,stepy*6]]]
  console.log(matrix);
  }

createMatrix();
//creo e muovo il rect
var stato= [[matrix[0][0][0],matrix[0][0][1],0],[matrix[1][0][0],matrix[1][0][1],0]];
console.log("stato",stato);

function blink(arr){
  arr= arr[0];
  var myVar = setInterval(function(){ 
    arr[2]+=0.1;
    render(arr, myVar);
    console.log(arr);
    
  },80);
 
}
function render(arr, val){
    var x_canv = arr[1];
    var y_canv =arr[0];
    ctx.fillStyle=my_gradient;
    ctx.globalAlpha=arr[2];
  if(arr[2]<=1){
    ctx.fillRect(matrix[x_canv][y_canv][0],matrix[x_canv][y_canv][1],50,30);
      console.log(x_canv,y_canv);
  }
  else{
   clearInterval(val);
  }
  }

blink(stato);

canvas{
  border: 5px solid black;
  background: black;
  /*background: linear-gradient(#813b97, #463c96);*/
  left: 50%;
  transform: translate(-50%);
  position: relative;
}

<canvas height="210" width="600" id="canvas">
</canvas>

Объявление вы можете увидеть, если я выберу только часть холста, все в порядке, но, как вы можете видеть, «stato» имеет два векторасодержащий пару координат и альфа-значение .. как я могу сделать тот же эффект, но также с другим элементом "стато"?Я попытался с циклом for, но я не нашел решения .. заранее спасибо :)