1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
// Recursive DFS Approach
function floodFill(canvas, startRow, startCol, newColor) {
  // Get the original color
  const originalColor = canvas[startRow][startCol];
  
  // If the starting pixel is already the new color, no need to do anything
  if (originalColor === newColor) {
    return canvas;
  }
  
  // Call the recursive helper function
  dfs(canvas, startRow, startCol, originalColor, newColor);
  
  return canvas;
}
 
function dfs(canvas, row, col, originalColor, newColor) {
  // Check if the current position is valid
  if (row < 0 || row >= canvas.length || col < 0 || col >= canvas[0].length) {
    return;
  }
  
  // Check if the current pixel is the original color
  if (canvas[row][col] !== originalColor) {
    return;
  }
  
  // Change the color of the current pixel
  canvas[row][col] = newColor;
  
  // Recursively fill the adjacent pixels
  dfs(canvas, row + 1, col, originalColor, newColor);  // Down
  dfs(canvas, row - 1, col, originalColor, newColor);  // Up
  dfs(canvas, row, col + 1, originalColor, newColor);  // Right
  dfs(canvas, row, col - 1, originalColor, newColor);  // Left
}
 
// Iterative BFS Approach
function floodFillBFS(canvas, startRow, startCol, newColor) {
  // Get the original color
  const originalColor = canvas[startRow][startCol];
  
  // If the starting pixel is already the new color, no need to do anything
  if (originalColor === newColor) {
    return canvas;
  }
  
  // Initialize a queue with the starting pixel
  const queue = [[startRow, startCol]];
  
  while (queue.length > 0) {
    const [row, col] = queue.shift();
    
    // Check if the current position is valid
    if (row < 0 || row >= canvas.length || col < 0 || col >= canvas[0].length) {
      continue;
    }
    
    // Check if the current pixel is the original color
    if (canvas[row][col] !== originalColor) {
      continue;
    }
    
    // Change the color of the current pixel
    canvas[row][col] = newColor;
    
    // Enqueue the adjacent pixels
    queue.push([row + 1, col]);  // Down
    queue.push([row - 1, col]);  // Up
    queue.push([row, col + 1]);  // Right
    queue.push([row, col - 1]);  // Left
  }
  
  return canvas;
}
 
// Test cases
const canvas1 = [
  ['R', 'R', 'R', 'R'],
  ['R', 'B', 'B', 'R'],
  ['R', 'B', 'B', 'R'],
  ['R', 'R', 'R', 'R']
];
 
console.log("Original Canvas:");
printCanvas(canvas1);
 
console.log("\nAfter Flood Fill (DFS):");
const filledCanvas1 = floodFill([...canvas1.map(row => [...row])], 1, 1, 'G');
printCanvas(filledCanvas1);
 
console.log("\nAfter Flood Fill (BFS):");
const filledCanvas2 = floodFillBFS([...canvas1.map(row => [...row])], 1, 1, 'G');
printCanvas(filledCanvas2);
 
// Helper function to print the canvas
function printCanvas(canvas) {
  for (const row of canvas) {
    console.log(row.join(' '));
  }
}