SOURCE

<script src="https://unpkg.com/p5@0.7.2/lib/p5.min.js"></script>
<script src="https://unpkg.com/p5@0.7.2/lib/addons/p5.dom.min.js"></script>

<script>
let img;
let max = 10;
let mr = 30;
let slider, p;

function preload() {
  img = loadImage('https://i.loli.net/2019/01/13/5c3ac84832d73.jpg');
}

function setup() {
  createCanvas(img.width, img.height);
  pixelDensity(1);
  background(0);

  createElement('br');
  p = createP(mr)
  slider = createSlider(0, 100, 30, 1).input(() => {
    mr = slider.value();
    p.html(mr)
  });
}

function draw() {
  background(img);
  img.loadPixels();
  for (let x = 0; x < width; x += max) {
    for (let y = 0; y < height; y += max) {
      let index = (x + y * width) * 4;
      let r = img.pixels[index + 0];
      let g = img.pixels[index + 1];
      let b = img.pixels[index + 2];
      let a = img.pixels[index + 3];
      if (
        x >= mouseX - mr &&
        x <= mouseX + mr &&
        y >= mouseY - mr &&
        y <= mouseY + mr
      ) {
        noStroke();
        fill(r, g, b, a);
        rect(x, y, max, max);
      }
    }
  }
}

</script>