For the Christmas hackathon, I've decided to dive into HTML Canvas API and see if I can create a simple, but awesome paint app. I didn't have the chance to work with the Canvas API until now, so this hackathon gave me a nice motivation to do so.

Let's take a look at the app I have created for the hackathon, it's called "Magic Painter".

Demo

Magic Painter demo on Netlify

Repository

github.com/codeAdrian/react-magic-painter

Tech stack

• React (with custom React hooks)
• Canvas API
• Native color picker and range inputs
• Font awesome icons
• Netlify hosting

About the app

Intro screen

Since I'm primarily a frontend developer and I want to pay special attention to design and details, I've wanted to create a nice splash screen for the app. I was inspired by the watercolor and paint set box designs.

I remember when I was buying paint sets for school, I was impressed by the images on the boxes. They showed a beautiful painting and were basically communicating "You can paint this beautiful image with this set". So I wanted to mimic that feeling with the splash screen.

I also wanted to use CSS properties I don't have much chance to use, like conic gradient borders and overlayed gradients on the text. The button also has some nice transition animation. Additionally, the button colors change over time in a smooth animation.

Paint canvas

Let's talk about the main part of the app, the painting canvas, and the available tools.

There are two tools that set apart this paint app from the others, it's what you'd call a "magic part". First tool is a "Magic Brush" which paints a beautiful stream of every available color (with a fixed saturation and lightness) in a gradient. This allows users to create magical and dream-like art.

The second tool is the "Dynamic Width" tool which changes the paint tool brush radius from a minimum to a maximum value pixel by pixel, creating a beautiful flow of paint. When combined with the Magic Brush tool, it yields some astonishing results.

Other tools include:

• Brush preview (color and size)
• Standard solid color brush
• Eraser
• Color picker
• Image downloader (download images as png)
• Manual brush size control
• Magic brush color saturation and lightness controls

Conclusion

And that's a wrap. Thank you for reading the article, hope you enjoyed my paint app. Let me know what you think about it and feel free to show me what art you've created using the app in the comments!

Thanks to Hashnode for creating and hosting this awesome hackathon and motivating me to create something fun in these few days.

Have a wonderful 2021, everyone!