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
 
prabhukadode profile image
Prabhu •

Awesome

Collapse
 
0shuvo0 profile image
Shuvo •

Glad you liked it

Collapse
 
drsimplegraffiti profile image
DrSimple •

This is awesome

Collapse
 
0shuvo0 profile image
Shuvo •

Glad you liked it

Collapse
 
waiylkarim profile image
WAIYL KARIM •

Brilliant

Collapse
 
0shuvo0 profile image
Shuvo •

Many thanks

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
 
zyabxwcd profile image
Akash •

Amazing. Well explained, clear and readable code.

Collapse
 
0shuvo0 profile image
Shuvo •

Thanks a lot 💓
Glad you liked it

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
 
mrzenw profile image
MrZenW •

It's amazing!

Collapse
 
0shuvo0 profile image
Shuvo •

Many thanks

Collapse
 
maxibove13 profile image
maxibove13 •

Awesome and really clear. Thank you so much!

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
 
enriquesource profile image
EnriqueSource •

Really awesome. Thanks

Collapse
 
minhazhalim profile image
Minhaz Halim Zim •

Awesome

Collapse
 
0shuvo0 profile image
Shuvo •

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
 
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
 
baramoonda profile image
baramoonda •

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

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?