Come, Paint With Us!

Inspiration

While registering for the event, we saw that we have a mini-event "MS Bob Ross". At that point, we got an idea! Let's create a Paint web app in ReactJS!

What it does

Come, Paint With Us! is a paint web app built in ReactJS. Pick your brush and make a master piece!

How we built it

The web app is built using ReactJS + Bootstrap. Canvas API is used to draw and edit the graphics on the canvas sheet. It has features like, pen tool, eraser, clear screen and undo. You can also adjust your pen size and choose or use color pick to select a color.

Challenges we ran into

Implementing the undo feature was pretty challenging for us. The approach we took is capturing every stroke on the canvas and appending it to an array. On undo-ing, it will pop from the array and put the image data of the previous index on the canvas.

Accomplishments that we're proud of

Working with states was little confusing for us. There were some problems initially, but it was fun solving and learning from our mistakes.

What we learned

It was great fun building the web app. We learnt about different react hooks and problems in using them.

What's next for Come, Paint With Us!

We are planning to implement more features like, adding shapes to the web-app and also copy/paste feature. You'll surely find it in the upcoming updates.

Built With

• canvasapi
• netlify
• react