Magic Painter - Christmas hackathon project

Featured on Hashnode

Subscribe to my newsletter and never miss my upcoming articles

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.

Screenshot 2020-12-26 at 18.59.59.png

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.

magic-brush.gif

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.

dynamic-brush.gif

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!

Screenshot 2020-12-26 at 19.32.36.png

Marie-Elise's photo

Awesome idea! Congrats!

Adrian Bece's photo

Thank you very much! Cheers!

Yogesh Chavan's photo

Amazing.. Loved it ❤️

Adrian Bece's photo

Thank you very much! Cheers!

Esaú Morais's photo

Loved the simplicity and how you used custom hooks magic 🤩

Adrian Bece's photo

Thank you very much! Glad you enjoyed it!

Shanjai Raj G.'s photo

Awesome project, just so awesome!

Adrian Bece's photo

Thank you very much, glad you like it!

Rutik Wankhade's photo

This is cool. Had fun playing with it. 🙌

Adrian Bece's photo

Thank you. Glad you enjoyed it!

Braydon Coyer's photo

Very cool! Great job!

Adrian Bece's photo

Thank you very much, glad you like it!

Mohd Shad Mirza's photo

Loved it.

Adrian Bece's photo

Thank you very much! Cheers!