Remove Colored dots on HTML Canvas with Javascript

Question

I have a canvas that detects an image background and removes the background or changes its color, however the background is sometimes inconsistent and has anomalies that are very small, they are shown in this image below that is the generated canvas as the purple dots, how can I remove them without effecting the rest of the image.

Once the dots are removed I can then fill in the blanks and make the green "thicker" to cover the rest of the holes within the image. I need to get rid of all of the purple and the green around the purple too.

Answer 1

i = 0;
YNo = 1;
LineNo = 1;
for (i, n = pix.length; i < n; i += 4) 
{
  const r = pix[i],
  g = pix[i + 1],
  b = pix[i + 2];
  if (r > 240 && g < 40 && b > 240 )
  {
    pix[i] = 0;
    pix[i + 1] = 0;
    pix[i + 2] = 0;
    pix[i + 3] = 0;
    x = (i / 4) % imgWidth;
    y = YNo-1;

    ctx4.beginPath();
    ctx4.arc(x, y, 5, 0, 2 * Math.PI, false);
    ctx4.fillStyle = "#000000";
    ctx4.strokeStyle = "#000000";
    ctx4.fill();
    ctx4.stroke();
    ctx4.closePath();
  }
  if(LineNo % imgWidth == 0)
  {
    YNo++;
  }
  LineNo++;
}