I Built a Cozy Pixel Art Bouquet Maker Using HTML Canvas

Hi!
I recently built a small web-based creative tool called Bloomy🌸, a cozy pixel art bouquet maker where users can design their own digital flower bouquets, add notes and share the link with anyone they want.

My goal was to explore HTML Canvas, experiment with pixel art, and create something calming and fun to use.

🌸 What is Bloomy?

Bloomy🌸 is a browser-based tool that lets users:

• Place pixel art flowers on a canvas
• Move, rotate, resize, and arrange them freely
• Create a custom digital bouquet in a cozy, creative environment
• Share the bouquet via a unique URL with a loved one

App UI:

View Mode:

✨ Why I Built This Project

I built Bloomy🌸 simply because I love cozy, creative apps like this.

At the same time, I wanted to experiment with frontend development beyond typical form-based or CRUD projects.

This project allowed me to combine creative design with interactive coding, which made the learning process much more enjoyable.

Technologies Used

• HTML5 Canvas API
• Vanilla JavaScript
• CSS for styling and layout
• Aseprite for pixel art assets
• Figma for UI design

No frameworks — I wanted to understand how things work at a lower level.

What I Learned

This project taught me a lot, especially about:

• How the Canvas rendering pipeline works
• Managing state for multiple interactive objects
• Handling mouse events for drag, resize, and rotation
• Pixel-perfect rendering and hit detection
• Breaking down visual behavior into small, logical steps

Canvas projects really push you to think differently compared to DOM-based UI.

What’s Next?

Bloomy is still a work in progress.

Some ideas I’m considering:

• More flower assets
• Color themes / seasonal modes
• Exporting the bouquet as an image
• Improved mobile support (it’s responsive, but still needs refinement)

Try It Out

You can try Bloomy via the live demo.

You can use it on both desktop and mobile, but I currently recommend desktop for the best experience.

You can also check out the GitHub repository here:

https://github.com/ycnkc/bloomy

Feedback is always welcome 🌸