` for each one.
+- Each swatch gets its background color set and a click handler.
+- When clicked, we update `currentColor`, sync the custom color picker input, and toggle the `.active` class so only the selected swatch has the white border.
+
+### Step 4-b: Custom Color Picker
+
+Find the comment marked `Step 4-b` and add the custom color picker handler:
+
+```javascript
+document.getElementById("custom-color").addEventListener("input", (e) => {
+ currentColor = e.target.value;
+ document
+ .querySelectorAll(".color-swatch")
+ .forEach((s) => s.classList.remove("active"));
+});
+```
+
+When the user picks a custom color, we update `currentColor` and deselect all preset swatches (since the active color is now a custom one).
+
+### Step 4-c: Tool Button Switching
+
+Next, go to `Step 4-c` and wire up the tool buttons:
+
+```javascript
+document.querySelectorAll(".tool-btn").forEach((btn) => {
+ btn.addEventListener("click", () => {
+ currentTool = btn.dataset.tool;
+ document
+ .querySelectorAll(".tool-btn")
+ .forEach((b) => b.classList.remove("active"));
+ btn.classList.add("active");
+ });
+});
+```
+
+**How this works:**
+
+- We select all buttons with class `.tool-btn` and add a click handler to each.
+- `btn.dataset.tool` reads the `data-tool` attribute we set in the HTML - this gives us `"pen"`, `"eraser"`, or `"fill"`.
+- We remove `.active` from all tool buttons, then add it to the clicked one.
+
+The `buildPalette()` call is already in the starter code, so save and refresh - you should see 16 color swatches in the toolbar. Click them to switch colors!
+
+## Step 5: Add Grid Size Switching
+
+For `Step 5`, add the grid size dropdown:
+
+```javascript
+document.getElementById("grid-size").addEventListener("change", (e) => {
+ const confirmed = confirm(
+ "Changing grid size will clear your canvas. Continue?",
+ );
+ if (confirmed) {
+ gridSize = parseInt(e.target.value);
+ init();
+ } else {
+ e.target.value = gridSize;
+ }
+});
+```
+
+**How this works:**
+
+- When the dropdown value changes, we show a confirmation dialog - because changing the grid size resets everything.
+- If confirmed, we parse the new value (`"16"`, `"32"`, or `"64"` - these are strings from the HTML, so we need `parseInt`), update `gridSize`, and call `init()` to rebuild the grid from scratch.
+- If cancelled, we revert the dropdown back to the current grid size so it stays in sync.
+
+**Test it:** Switch to 32x32 - the grid resets with much smaller cells, giving you more detail to work with:
+
+
+
+## Step 6: Export as PNG
+
+The last feature! Find `Step 6` and add the export handler:
+
+```javascript
+document.getElementById("export-btn").addEventListener("click", () => {
+ const exportCanvas = document.createElement("canvas");
+ const exportCtx = exportCanvas.getContext("2d");
+ const exportCellSize = Math.max(16, Math.floor(512 / gridSize));
+ exportCanvas.width = gridSize * exportCellSize;
+ exportCanvas.height = gridSize * exportCellSize;
+
+ for (let row = 0; row < gridSize; row++) {
+ for (let col = 0; col < gridSize; col++) {
+ exportCtx.fillStyle = grid[row][col];
+ exportCtx.fillRect(
+ col * exportCellSize,
+ row * exportCellSize,
+ exportCellSize,
+ exportCellSize,
+ );
+ }
+ }
+
+ const link = document.createElement("a");
+ link.download = "pixel-art.png";
+ link.href = exportCanvas.toDataURL("image/png");
+ link.click();
+});
+```
+
+**Why a separate canvas?**
+
+We don't export the visible canvas directly because it has grid lines drawn on it. Instead, we create a new, invisible canvas and draw only the colored cells - no grid lines. This gives us a clean exported image.
+
+**How the export works:**
+
+- `Math.max(16, Math.floor(512 / gridSize))` ensures the exported image is at least 512px wide. A 16x16 grid exports at 32px per cell (512px total), while a 64x64 grid exports at 8px per cell.
+- We loop through the grid and draw each cell's color using `fillRect`, same as rendering, but without the `strokeRect` grid lines.
+- `canvas.toDataURL("image/png")` converts the canvas content into a PNG image encoded as a data URL.
+- We create a temporary `
` element with the `download` attribute set to `"pixel-art.png"` and programmatically click it to trigger the browser's download dialog.
+
+**Save the file** and refresh your browser. Your Pixel Art Creator should now be fully functional!
+
+Test everything:
+
+- **Pen tool** - Click and drag to draw. Try different colors from the palette.
+- **Eraser tool** - Click the eraser button, then click cells to erase them back to white.
+- **Fill tool** - Draw a closed shape, select the fill tool, then click inside it to flood fill.
+- **Custom color** - Click the color picker next to "Custom" to choose any color.
+- **Grid size** - Switch between 16x16, 32x32, and 64x64.
+- **Export** - Draw something, then click "Download PNG" to save it.
+
+## Conclusion
+
+Congratulations! You've built a pixel art editor from scratch using only HTML, CSS, and JavaScript!
+
+Let's recap what we learned:
+
+### Concepts Covered
+
+- **Canvas API** - Using `fillRect`, `strokeRect`, `toDataURL`, and `getContext("2d")` to draw and export graphics.
+- **2D Arrays** - Representing grid state in memory and keeping it in sync with the visual canvas.
+- **Event Handling** - Using `mousedown`, `mousemove`, `mouseup`, and `mouseleave` for click-and-drag drawing.
+- **Coordinate Mapping** - Converting screen pixel positions to grid cell indices using `getBoundingClientRect()` and `Math.floor`.
+- **Flood Fill Algorithm** - Using a stack-based iterative approach to fill contiguous regions.
+- **File Downloads** - Programmatically creating download links with `toDataURL()`.
+- **Responsive CSS** - Using `@media` queries to adapt layouts for different screen sizes.
+
+### Next Steps
+
+Now that you have a working pixel art editor, here are some ways to extend it:
+
+- **Undo/Redo** - Save grid snapshots to an array and navigate back and forth.
+- **Save/Load** - Store the grid in `localStorage` so art persists between sessions.
+- **Animation** - Create multiple frames and play them back as a GIF-like animation.
+- **Layers** - Add multiple grids stacked on top of each other, like Photoshop layers.
+- **Touch Support** - Add `touchstart`, `touchmove`, and `touchend` events for tablets and phones.
+
+### More Resources
+
+- [Canvas API Documentation (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
+- [Flood Fill Algorithm (Wikipedia)](https://en.wikipedia.org/wiki/Flood_fill)
+- [Mouse Events (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
+- [CSS Grid Layout (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout)
+
+Share your pixel art creations on Instagram and tag [@gokucodes](https://www.instagram.com/gokucodes/) and [@codedex_io](https://www.instagram.com/codedex.io/)!
+
+You can try the [live demo here](https://goku-kun.github.io/build-a-pixel-art-creator-with-html-css-and-javascript/completed/) to see what we're building!
+
+**Note:** This tutorial focuses on learning Canvas API fundamentals and event handling. No libraries or frameworks needed.
+
+Let's start!
+
+## How Does a Pixel Art Editor Work?
+
+Before we jump into code, let's understand the core ideas behind any pixel art editor.
+
+### The Grid as a 2D Array
+
+A pixel art canvas is just a grid of colored squares. In code, we represent this grid as a **2D array**, an array of arrays:
+
+```javascript
+// A 3x3 grid example
+[
+ ["#ffffff", "#ff0000", "#ffffff"],
+ ["#ff0000", "#ff0000", "#ff0000"],
+ ["#ffffff", "#ff0000", "#ffffff"],
+];
+```
+
+Each value is a hex color string. The position in the array corresponds to a cell on the grid: `grid[row][col]` gives us the color at that position.
+
+### Drawing with Canvas
+
+The HTML5 `