diff --git a/contents/flood_fill/code/javascript/flood_fill.js b/contents/flood_fill/code/javascript/flood_fill.js
new file mode 100644
index 000000000..8180869ab
--- /dev/null
+++ b/contents/flood_fill/code/javascript/flood_fill.js
@@ -0,0 +1,101 @@
+// This is a p5.js sketch.
+// https://p5js.org
+
+function isInBounds(x, y) {
+  return (x >= 0) && (x < width) && (y >= 0) && (y < height)
+}
+
+function isColor(x, y, color) {
+  const index = (x + y * width) * 4
+  return pixels[index] == red(color) &&
+    pixels[index + 1] == green(color) &&
+    pixels[index + 2] == blue(color) &&
+    pixels[index + 3] == alpha(color)
+}
+
+function recolorPixel(x, y, oldColor, newColor) {
+  const index = (x + y * width) * 4
+  pixels[index] = red(newColor)
+  pixels[index + 1] = green(newColor)
+  pixels[index + 2] = blue(newColor)
+  pixels[index + 3] = alpha(newColor)
+}
+
+function findNeighbors(x, y, oldColor) {
+  const allNeighbors = [
+    [x, y - 1],  // North
+    [x + 1, y],  // East
+    [x, y + 1],  // South
+    [x - 1, y]   // West
+  ]
+  
+  return allNeighbors
+    .filter(loc => isInBounds(...loc))
+    .filter(loc => isColor(...loc, oldColor))
+}
+
+function stackFill(x, y, oldColor, newColor) {
+  const stack = [
+    [x, y]
+  ]
+
+  while (stack.length > 0) {
+    const currentLoc = stack.pop()
+    recolorPixel(...currentLoc, oldColor, newColor)
+
+    for (const n of findNeighbors(...currentLoc, oldColor))
+      stack.push(n)
+  }
+}
+
+function queueFill(x, y, oldColor, newColor) {
+  const queue = [
+    [x, y]
+  ]
+
+  while (queue.length > 0) {
+    const currentLoc = queue.shift()
+    recolorPixel(...currentLoc, oldColor, newColor)
+
+    for (const n of findNeighbors(...currentLoc, oldColor)) {
+      // Color neighbor pixel before enqueuing to prevent
+      // it from being colored multiple times
+      recolorPixel(...n, oldColor, newColor)
+      queue.push(n)
+    }
+  }
+}
+
+function recursiveFill(x, y, oldColor, newColor) {
+  recolorPixel(x, y, oldColor, newColor)
+
+  for (const n of findNeighbors(x, y, oldColor))
+    recursiveFill(...n, oldColor, newColor)
+}
+
+function setup() {
+  createCanvas(600, 200);
+  noLoop()
+}
+
+function draw() {
+  const bgColor = color(0, 0, 0, 0)
+  background(bgColor);
+
+  noFill()
+  stroke(0)
+  strokeWeight(3)
+  triangle(80, 80, 160, 100, 100, 140)
+  triangle(340, 30, 380, 170, 230, 120)
+  triangle(480, 40, 580, 140, 430, 160)
+
+  loadPixels()
+  
+  // recursiveFill tends to blow up the stack for large 
+  // areas so it gets a smaller triangle
+  recursiveFill(100, 100, bgColor, color(30, 245, 250))
+  stackFill(300, 100, bgColor, color(130, 50, 180))
+  queueFill(500, 100, bgColor, color(50, 255, 225))
+  
+  updatePixels()
+}
\ No newline at end of file
diff --git a/contents/flood_fill/flood_fill.md b/contents/flood_fill/flood_fill.md
index 836f86897..07a0c727e 100644
--- a/contents/flood_fill/flood_fill.md
+++ b/contents/flood_fill/flood_fill.md
@@ -90,6 +90,8 @@ In code, this might look like this:
 [import:37-55, lang:"julia"](code/julia/flood_fill.jl)
 {% sample lang="c" %}
 [import:34-52, lang:"c"](code/c/flood_fill.c)
+{% sample lang="js" %}
+[import:24-35, lang:"javascript"](code/javascript/flood_fill.js)
 {% endmethod %}
 
 
@@ -106,15 +108,8 @@ In code, it might look like this:
 [import:106-118, lang:"julia"](code/julia/flood_fill.jl)
 {% sample lang="c" %}
 [import:180-195, lang:"c"](code/c/flood_fill.c)
-{% endmethod %}
-
-All code snippets for this chapter rely on an exterior `color` function, defined as
-
-{% method %}
-{% sample lang="jl" %}
-[import:23-35, lang:"julia"](code/julia/flood_fill.jl)
-{% sample lang="c" %}
-[import:28-32, lang:"c"](code/c/flood_fill.c)
+{% sample lang="js" %}
+[import:69-74, lang:"javascript"](code/javascript/flood_fill.js)
 {% endmethod %}
 
 The above code continues recursing through available neighbors as long as neighbors exist, and this should work so long as we are adding the correct set of neighbors.
@@ -126,6 +121,8 @@ Additionally, it is possible to do the same type of traversal by managing a stac
 [import:57-77, lang:"julia"](code/julia/flood_fill.jl)
 {% sample lang="c" %}
 [import:85-108, lang:"c"](code/c/flood_fill.c)
+{% sample lang="js" %}
+[import:37-49, lang:"javascript"](code/javascript/flood_fill.js)
 {% endmethod %}
 
 This is ultimately the same method of traversal as before; however, because we are managing our own data structure, there are a few distinct differences:
@@ -165,6 +162,8 @@ The code would look something like this:
 [import:80-104, lang:"julia"](code/julia/flood_fill.jl)
 {% sample lang="c" %}
 [import:155-178, lang:"c"](code/c/flood_fill.c)
+{% sample lang="js" %}
+[import:51-67, lang:"javascript"](code/javascript/flood_fill.js)
 {% endmethod %}
 
 Now, there is a small trick in this code that must be considered to make sure it runs optimally.
@@ -243,6 +242,8 @@ After, we will fill in the left-hand side of the array to be all ones by choosin
 [import, lang:"julia"](code/julia/flood_fill.jl)
 {% sample lang="c" %}
 [import, lang:"c"](code/c/flood_fill.c)
+{% sample lang="js" %}
+[import, lang:"javascript"](code/javascript/flood_fill.js)
 {% endmethod %}