title: Flood fill algorithm on cavas using typescript (angular)
body: <p>I am trying to implement a paint bucket that instaead of coloring the shape it creates a new shape and cover it. 
  after some research I decided to implement the flood fill algorithm using a stack.
  '''  </p>
  
  <pre><code>floodFill(pos: Point2D, stack: Point2D[]): void {
      if (this.stroke.includes(pos)) { return; }
      this.setColor(pos);
      this.stroke.push(pos);
      const cardinalPoints: Point2D[] = [{x: pos.x, y: pos.y - 1}, {x: pos.x + 1, y: pos.y},
                                         {x: pos.x, y: pos.y + 1}, {x: pos.x - 1, y: pos.y}];
      cardinalPoints.forEach( (point) =&gt; {
        const color = this.getColor(point);
        if (this.toleranceCheck(color, this.targetColor) &amp;&amp; !stack.includes(point)) { stack.push(point); }
      });
      console.log(stack.length);
      const nextPoint = stack.pop();
      if (nextPoint) {this.floodFill(nextPoint, stack); }
    }
  </code></pre>
  
  <p>'''
  I think it is stuck in the recursion.</p>
  
  <ul>
  <li>setColor sets the desired pixels of the ImageData.data uint8ClampedArray </li>
  <li>tolerance check checks if the pixel's color are within [targetColor - (targetColor * tolerance), targetColor + (targetColor * tolerance)];</li>
  <li>stroke is a list of the visited points</li>
  <li>stack is the stack of point to check
  I tried implementing it without a stack (calling it North/east/west/south) but the same happens.</li>
  </ul>
  
  <p>A fix for that is calling the function in a while loop like shown in the code under: </p>
  
  <pre><code>  async onMouseDown(e: MouseEvent): Promise&lt;void&gt; {
  await this.getCanvasData();
  this.stack.push(new Point2D(e.offsetX, e.offsetY));
  this.targetColor = this.getColor(new Point2D(e.offsetX, e.offsetY));
  this.visited = [];
  this.control.addShape(this.shape);
  this.shape.style.strokeWidth = '1';
  this.shape.style.primaryColor = this.colors.getPrimaryString();
  this.shape.style.secondaryColor = this.colors.getPrimaryString();
  while (this.stack.length !== 0) {
    console.log(this.stack.length);
    let point = this.stack.pop();
    while (point &amp;&amp; this.visitedIncludes(point)) { point = this.stack.pop(); }
    console.log(this.stack.length);
    if (point) { this.floodFill(point);}
    this.pathify();
  }
  </code></pre>
  
  <p>}</p>
  
  <p>This code works fine for small areas. But is really slow for bigger areas.
  can it be optimised? </p>