A web-based spritesheet generator -- and the first JavaScript project ever. Built to solve a real problem: creating game art for Godot. The bridge from game engine to browser. The moment everything changed.
SpritesheetGen was born from necessity. Making games in Godot meant needing spritesheets, and existing tools were either expensive or clunky. So: build one in the browser. This was the first JavaScript project -- the Canvas API felt like magic after GDScript. Drawing pixels directly, manipulating image data, exporting to formats Godot could read. The web became a creative tool, not just a deployment target.
Pure vanilla JavaScript. No frameworks, no build tools. Canvas 2D API for rendering, DOM for the editor UI, Blob API for exports.
A single-page app before knowing what SPAs were. The canvas handles rendering while a layer system manages drawing state.
The flood fill algorithm -- the first time pixel manipulation clicked. Reading and writing individual pixels from Canvas ImageData.
function floodFill(ctx, x, y, fillColor) { const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; const targetColor = getPixelColor(data, x, y); // Don't fill if clicking on same color if (colorsMatch(targetColor, fillColor)) return; const stack = [[x, y]]; while (stack.length > 0) { const [cx, cy] = stack.pop(); const idx = (cy * canvas.width + cx) * 4; if (cx < 0 || cx >= canvas.width) continue; if (cy < 0 || cy >= canvas.height) continue; if (!colorsMatch(getPixelAt(data, idx), targetColor)) continue; // Set pixel data[idx] = fillColor.r; data[idx + 1] = fillColor.g; data[idx + 2] = fillColor.b; data[idx + 3] = 255; // Push neighbors stack.push([cx + 1, cy], [cx - 1, cy], [cx, cy + 1], [cx, cy - 1]); } ctx.putImageData(imageData, 0, 0); }
Coming from Godot, the Canvas 2D API felt familiar. getContext('2d') was basically a drawing surface. ImageData gave pixel-level control. The browser was not just for websites -- it was a creative runtime.
Learning JavaScript by building a tool you actually need beats any course. Every feature required research: "how to do flood fill in JS", "how to export canvas to PNG." The project was the curriculum.
SpritesheetGen bridged Godot and the web. It was a tool for making game assets, but building it taught web development. The bridge project -- the one connecting what you know to what you want to learn -- is the most valuable project you can build.
No React. No Webpack. No node_modules. The entire application is 199 KB. It loads instantly and works everywhere. This lesson would echo through every project that came after.