Hey folks! I’m Noah Street, and today I want to take you on a little journey—one that involves code, creativity, and a whole lot of trial and error. If you’re familiar with my work, you know I enjoy tackling complex problems and, occasionally, biting off more than I can chew (but that’s part of the fun, right?). My latest adventure? Building a design tool using Paper.js and Phaser.js—two powerful JavaScript libraries typically used for game development, but which also lend themselves beautifully to interactive design work.

Let’s dive in.

It All Started With a Canvas… Literally.

A blank canvas can be both exciting and terrifying. When I first started building this design tool, that’s exactly what I was staring at: a blank, virtual canvas waiting to be transformed into something useful. I’ve always been passionate about crafting tools that help people express their ideas visually (probably because my work as an IT Systems Analyst at a liberal arts college keeps me grounded in both technical and creative realms). I wanted this tool to feel intuitive, whether you’re a seasoned developer or just someone who enjoys doodling around with code.

My weapon of choice? Paper.js.

For those of you who aren’t familiar, Paper.js is a vector graphics scripting framework that runs on top of the HTML5 canvas element. It’s perfect for drawing shapes, paths, and curves programmatically. If you’re a fan of precision and love seeing smooth Bézier curves flow across the screen like butter on a hot skillet, Paper.js is your best friend.

A Few Slices of Humble Pie

Now, while Paper.js is a fantastic tool for building drawing applications, I’ve gotta admit: getting things to work as smoothly as they do now wasn’t all rainbows and unicorns. Let me tell you a little story about curves (no, not those kinds of curves). When I first implemented the Bézier curve tool, it behaved more like a mischievous cat than a drawing tool—refusing to work properly unless everything was just right. It wouldn’t respond to mouse clicks, or it would suddenly freeze up. Turns out, I’d forgotten to properly manage how segments were added, leaving my code in limbo.

Pro tip: always test your tools on different layers—turns out, mine only worked when a new layer was created. And yes, I face-palmed hard after discovering that.

But, after some debugging sessions (and probably more coffee than was healthy), I finally got the tool to work on existing layers. A small victory, but man, did it feel good. It was a great reminder that patience and persistence often pay off, even when things seem as wobbly as those early Bézier curves.

Enter: Phaser.js

Once I had the drawing tools working—lines, curves, rectangles, circles—you know, the basics—it was time to level up. And what better way to level up than by borrowing some magic from video game development? That’s where Phaser.js comes in.

Phaser.js is a fast, fun, and flexible 2D game engine for making HTML5 games. Now, I know what you’re thinking: “Wait, aren’t you building a design tool, not a game?” True. But, hear me out: when you think about it, many design tools rely on concepts from game development—collision detection (think snapping objects into place), animations (drag-and-drop smoothness), and interactive feedback (mouse hovering or selecting objects). With Phaser.js, I could take my design tool up a notch by adding interactive features with ease.

Exporting Designs as Phaser Code

One of the most exciting features I’ve implemented in the tool is the ability to export designs as Phaser.js code. That’s right—anything you create on the canvas, whether it’s a complex path or a simple shape, can be converted into Phaser code that you can then use in your games (or other projects). It’s like giving artists and developers a seamless bridge between design and development—pretty cool, huh?

Building the Tool: A Balancing Act

Throughout this process, I had to balance the needs of both developers and non-developers. On one hand, I wanted the tool to be simple enough for anyone to pick up and start drawing, but on the other hand, I wanted to provide enough depth for those who really wanted to dig into the code. It reminded me of my time managing IT systems at the college—balancing simplicity for users with the complex needs of maintaining a robust infrastructure. Every decision mattered, from how the layers interacted to the top menu options that make saving, loading, and exporting easy.

Speaking of which, the top menu gave me its own set of headaches. Do you ever feel like you’ve got everything perfectly planned, but then you realize you forgot one tiny thing that causes a cascade of bugs? That was me, trying to get “Export to Phaser” working. But after a few late-night debugging sessions (and the obligatory curse at my laptop), I managed to pull it together.

The Tech That Made It Possible

Here’s a quick breakdown of the tools that brought this project to life:

• Paper.js: The heart of the tool, making it easy to draw shapes, paths, and curves. It’s elegant and powerful, perfect for vector graphics.
• Phaser.js: The workhorse that makes exporting to a game engine possible. With Phaser, I’ve been able to integrate dynamic interactions and create seamless game-ready designs.
• JavaScript: The glue holding it all together, of course. Working with vanilla JavaScript in the browser made development fast, accessible, and fun.

I also had some fun experimenting with responsive UI elements, ensuring the tool is as smooth on a small screen as it is on a desktop monitor. The combination of Paper.js’s elegance and Phaser.js’s versatility made building this tool feel like sculpting with clay—molding raw elements into something that can be functional, fun, and flexible.

What’s Next?

Now that the core is up and running, I’m excited to keep pushing this tool further. I’m toying with ideas like adding more export formats, expanding the drawing features, or even integrating real-time collaboration (so you and a friend can create designs together remotely).

It’s been an incredible journey so far, and I’m proud of where this tool is today. But as always, there’s more to learn, more to tweak, and more features to build. If there’s one thing I’ve learned over the years (whether managing systems or building tools), it’s that iteration is the name of the game. You keep improving, testing, and refining until everything clicks.

If you want to try the tool or just chat about the nitty-gritty of building something like this, head over to noahjstreet.com and drop me a line. I’d love to hear your thoughts!

Until next time, keep coding, keep creating, and remember: even the most wobbly curves can lead to something beautiful.

— Noah