DEV Community

Cover image for Lets create a Drawing APP with JS

Lets create a Drawing APP with JS

Shuvo on November 10, 2021

In this article I will show you how you can create a Drawing/Pain APP using JavaScript and HTML5 canvas. Features: Draw on Canvas Mult...
Collapse
 
therealokoro profile image
Okoro Redemption

Beautiful

Collapse
 
0shuvo0 profile image
Shuvo

Many many thanks ❤

Collapse
 
drsimplegraffiti profile image
Abayomi Ogunnusi

This is awesome

Collapse
 
0shuvo0 profile image
Shuvo

Glad you liked it

Collapse
 
prabhukadode profile image
Prabhu

Awesome

Collapse
 
0shuvo0 profile image
Shuvo

Glad you liked it

Collapse
 
chiragshivam profile image
Chivi

Wow, that's pretty cool, will definitely try this!

Collapse
 
0shuvo0 profile image
Shuvo

Sure, glad you liked it

Collapse
 
waiylkarim profile image
WAIYL KARIM

Brilliant

Collapse
 
0shuvo0 profile image
Shuvo

Many thanks

Collapse
 
mrzenw profile image
MrZenW

It's amazing!

Collapse
 
0shuvo0 profile image
Shuvo

Many thanks

Collapse
 
cmgustin profile image
Chris Gustin

Great tutorial! This was a lot of fun to follow along with, the code was super clean, and you did a great job of clearly explaining each step.

Collapse
 
0shuvo0 profile image
Shuvo

Many many thanks
I'm really glad you liked it

Collapse
 
zyabxwcd profile image
Akash

Amazing. Well explained, clear and readable code.

Collapse
 
0shuvo0 profile image
Shuvo

Thanks a lot 💓
Glad you liked it

Collapse
 
minhazhalim profile image
Minhaz Halim (Zim)

Awesome

Collapse
 
0shuvo0 profile image
Shuvo

Thanks 💓

Collapse
 
maxibove13 profile image
maxibove13

Awesome and really clear. Thank you so much!

Collapse
 
enriquesource profile image
EnriqueSource

Really awesome. Thanks

Collapse
 
bbaublys profile image
Boris Baublys

Excellent thank you. Any ideas how to save the coordinates of the created objects now? For example, in a Google sheet.

Collapse
 
0shuvo0 profile image
Shuvo

On mouse move along with drawing a line you can save coords in a array

Collapse
 
salehmubashar profile image
Saleh Mubashar

very cool!
Is there any other possible approach for drawing the line.
instead of using prev and current can we use any other way
just curious
thanks

Collapse
 
0shuvo0 profile image
Shuvo

Well you need to know two point between which the line should be drawn

Collapse
 
theb055 profile image
THEB055

Useful 🖤

Collapse
 
0shuvo0 profile image
Shuvo

Gald it helped

Collapse
 
facundoruiz profile image
facundo

Muy bueno, aplica le para una app de firmas.
Me trajo recuerdos de cuando tuvimos que hacer en C++ una app que pueda dibujar un punto , cuadrado , circulo aplicando POO.

Collapse
 
0shuvo0 profile image
Shuvo

Sorry I didn't understood

Collapse
 
arika profile image
Arika

This is amazing! When I click save and then download the PNG file it has a black background so you cannot really see the drawing super well. How do I get a white background?

Collapse
 
baramoonda profile image
baramoonda

Thanks, very helpful post!
How can I add buttons with line width?