js canvas ctx clip not working with forEach

In the beginning, there is for loop to generate colors and push them to an array. after that I want to print 50 circles with colors but when I use the ctx clip it did not print only one of them when I don't use ctx clip its print 50 of them

var arr= []
  for (var i = 1; i < 50; i++) {
   var color =  "#"+ Array.from({length: 6},()=> Math.floor(Math.random()*16).toString(16)).join("");
  arr.push({
color:color,
name:i
})  
  }
var canvas = document.getElementById("canvas");
          var ctx = canvas.getContext("2d");
canvas.width  = 35 * 10;
canvas.height = (arr.length /10) *35;
            var x = 0,y = 10;
            arr.filter(role => !isNaN(role.name)).sort((b1, b2) => b1.name - b2.name).forEach(role => {
                x += 30;
                if (x > 40 * 8) {
                    x = 30;
                    y += 30;
                }
              ctx.arc(x+12.5, y+12.5, 12, 0, Math.PI* 2 , false);
              ctx.stroke();
              ctx.clip();
            })

          var x = 0, y = 10;
            arr.filter(role => !isNaN(role.name)).sort((b1, b2) => b1.name - b2.name).forEach(role => {
                x += 30;
                if (x > 40 * 8) {
                    x = 30;
                    y += 30;
                }
                   ctx.font = "bold 19px Fjalla One, sans-serif";
                   ctx.fillStyle = role.color;
                   ctx.fillRect(x,y, 25, 25)
                   ctx.fillStyle = 'white';
                if (`${role.name}`.length > 2) {
                   ctx.font = "bold 14px Fjalla One, sans-serif";
                   ctx.fillText(role.name, x + 0, y + 18);
                } else if (`${role.name}`.length > 1) {
                   ctx.fillText(role.name, x + 2, y + 20);
                } else {
                   ctx.fillText(role.name, x + 7, y + 20);
                }
            });

<canvas id="canvas"></canvas>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW