Filter and Highlight Points Within a Rectangle on Canvas

The code snippet provided filters an array of points ('this.newData') based on whether they fall within a specific rectangle ('this.rect'). After filtering the points, it sets the color of the remaining points to white and draws them on a canvas using the 'ctx.arc()' and 'ctx.fill()' methods.

Here's the modified code to change the color of the filtered points to red instead of white:

this.newData = this.newData.filter(point => {
  return (point.x >= this.rect.attrs.x &&
    point.x <= (this.rect.attrs.x + this.rect.attrs.width) &&
    point.y >= this.rect.attrs.y &&
    point.y <= (this.rect.attrs.y + this.rect.attrs.height));
});

ctx.fillStyle = 'red'; // Set the color to red

this.newData.forEach(point => {
  ctx.beginPath();
  ctx.arc(point.x, point.y, 1, 0, 2 * Math.PI);
  ctx.fill();
});

This code will iterate over the filtered points ('this.newData') and draw each point on the canvas with a red color. Note that 'x' and 'y' are now 'point.x' and 'point.y' respectively.