Non overlapping circles

HTML

<canvas id="canvas" 
        width="400px" 
        height="400px"
        ></canvas>

CSS

canvas {
  border:5px solid #d3d3d3;
}

JavaScript

function drawCirle(x, y, r) {
	ctx.beginPath();
	ctx.arc(x, y, r, 0, 2*Math.PI);
	ctx.fill();
}

function randomUnfilled(imageData) {
	let pdata = imageData.data;
  let possibilities = [];
  for(let i = 0; i < pdata.length/4; i++) {
  	if (pdata[i] == 0 && 
    	  pdata[i+1] == 0 && 
        pdata[i+2] == 0 && 
        pdata[i+3] == 0
    ) {
    	possibilities.push({
      	x: i % imageData.width,
    		y: Math.floor(i / imageData.width)
      });
    }
  }
  
  let pi = Math.floor(Math.random() * possibilities.length);
  return possibilities[pi];
}

function noIntersection(c, cs) {
	for(let c2 of cs) {
  	let dy = c2.y - c.y;
    let dx = c2.x - c.x;
    if (Math.sqrt(dy*dy + dx*dx) < c.r + c2.r) {
    	return false;
    }
  }
  return true;
}

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let maxR = 50;
let circles = [];
setInterval(() => {
		ctx.clearRect(0,0,canvas.width,canvas.height);
		for(let c of circles) {
    	ctx.beginPath();
      ctx.arc(c.x, c.y, c.r, 0, Math.PI * 2);
      ctx.stroke();
    }
    let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    let p = randomUnfilled(imageData);
    let r = 1;
    while (noIntersection({x: p.x, y:p.y, r: r}, circles) && r < maxR) {
    	r++;
    }
    circles.push({x: p.x, y:p.y, r: r-1})
}, 300);