Build A Drawing or Paint App in HTML CSS & JavaScript | Drawing App in JavaScript

Поділитися
Вставка
  • Опубліковано 18 вер 2024

КОМЕНТАРІ • 192

  • @CodingNepal
    @CodingNepal  2 роки тому +35

    Get the Drawing App source code here: buymeacoffee.com/codingnepal/e/278848.
    This version includes more features such as undo/redo, line tool, responsive design, and touch-friendly interface.

    • @TechWithAashubro
      @TechWithAashubro 2 роки тому +2

      Cool project bro , keep learning....

    • @WestcolColombia_
      @WestcolColombia_ 2 роки тому +1

      Thank you so much for sharing your knowledge, blessings to you.🧑‍💻🏆🎉🥰🥰

    • @hansi202
      @hansi202 2 роки тому +1

      I want to save shapes to the localStorage (using the Save button) and then to load (using the load button) shapes from the localStorage. can you help me?

    • @thoughtsofapeer
      @thoughtsofapeer Рік тому

      Is it possible to use this on a react website or would I need to write it all in react?

    • @pandipatipavan3804
      @pandipatipavan3804 Рік тому

      Please provide the code files and the links in the description as soon as possible for free 🙏 😊

  • @rayhanmahmud9415
    @rayhanmahmud9415 2 роки тому +28

    So cool!
    A little voiceover and explanation would make this project insanely awesome!

  • @jannatulferdousi8895
    @jannatulferdousi8895 2 роки тому +13

    Excellent in one word. The long awaited result is a wonderful project.

  • @maskman4821
    @maskman4821 Рік тому +3

    So cool, This is the best canvas drawing app /tutorial we can ever have 😍

  • @primitivedev.
    @primitivedev. 2 роки тому +4

    excelente trabajo genial como siempre no acostumbro comentar pero quiece darte las gracias por tus exelentes aportes. gracias supongo que de parte de todos.

  • @DivyaTechGyan
    @DivyaTechGyan 2 роки тому +4

    Your projects are really awesome! I have also subscribed to your channel. Very much Thanks for uploading these projects.

  • @rm669
    @rm669 2 роки тому

    You are the best frontend dev in the internet.

  • @TechWithAashubro
    @TechWithAashubro 2 роки тому +3

    Long time no see ,Cool project with clear concept....

  • @akash-ooo
    @akash-ooo Рік тому

    I have learn lots of thing from this video. Thanks CodingNepal 💙💙💙💙

  • @jooryalhamed938
    @jooryalhamed938 Рік тому +1

    Great work and generous offer. Keep going!

  • @SparrowTutorialsFun
    @SparrowTutorialsFun 2 роки тому +1

    Wohooo!!🙌 🎉 Very Cool😎

  • @VortexVibesYT
    @VortexVibesYT 2 роки тому +1

    Hi! I am gonna try this for my website, Cool work, CodingNepal!

  • @shiekhpalace2401
    @shiekhpalace2401 2 роки тому +6

    I swear if you had teached all these projects in your own voice people should have understanded more and today you would have million of subscribers

    • @CodingNepal
      @CodingNepal  2 роки тому +1

      I'll try my best in the upcoming videos

    • @shiekhpalace2401
      @shiekhpalace2401 2 роки тому +1

      @@CodingNepal yes like other coders like code with harry you should explain it in your own voice

  • @latikawagh926
    @latikawagh926 17 днів тому

    I tried this app, its working perfectly fine.. thank you

    • @CodingNepal
      @CodingNepal  17 днів тому

      You're welcome.. Happy coding!

  • @himanshupathak6381
    @himanshupathak6381 2 роки тому +1

    Epic sir, Next Video how to make 3D games with js

  • @viki33
    @viki33 Рік тому

    Hi! Thanks for the inspiration. I was looking for ideas of proyects and y found this video. I didn't followed your steps but I've achived a similar and great result!

  • @ascodes3461
    @ascodes3461 Рік тому

    Aweeeeeeeeeeeesooomeeee, Learned something new, and what an excellent build...Thanks for sharing!!!😍😍😍

  • @Riteshk_007
    @Riteshk_007 Рік тому

    You are best teacher ❤️

  • @dot-artist
    @dot-artist Рік тому

    YOU ARE THE BEST! You give free codes, not like others.... Good work!

  • @design497
    @design497 Рік тому

    awesome coding nepal 😘👍👍👍

  • @tictocshorts5248
    @tictocshorts5248 Рік тому

    that was exactly what I needed , thank you so much

  • @lazycookingnepal
    @lazycookingnepal 2 роки тому

    I am loving this channel

  • @smarthacks120
    @smarthacks120 2 роки тому +1

    Superb 😍😍😍

  • @vaishnavia.n.312
    @vaishnavia.n.312 Рік тому

    You are awesome man, I am learning javascript from your tutorials.

    • @CodingNepal
      @CodingNepal  Рік тому +1

      Keep learning

    • @vaishnavia.n.312
      @vaishnavia.n.312 Рік тому

      @@CodingNepal Now I am doing your scramble word and the browser showed your comment, simply genius, you are helping a lot of people making it easy to understand especially people like me.

  • @man08839
    @man08839 2 роки тому +1

    Amazing😀😀

  • @CheckYouTubeUIUX
    @CheckYouTubeUIUX 2 роки тому

    Love from BANGLADESH ♥

  • @dytra_io
    @dytra_io Рік тому

    this is fire 🔥
    there aren't many canvas app tutorial like this, I'm automaticly subscribed!
    now please make tutorial to make apps like figma 😀

  • @shayanmahmood7480
    @shayanmahmood7480 2 роки тому

    you deserve more subscribers

  • @rohansingla4270
    @rohansingla4270 2 роки тому +1

    Quality Content!

    • @CodingNepal
      @CodingNepal  2 роки тому

      Happy to hear :)

    • @rohansingla4270
      @rohansingla4270 2 роки тому

      @@CodingNepal bro i really feel happy as you are the only youtuber who gives me heart

  • @rudra9535
    @rudra9535 Рік тому

    you are just amazing. outstanding.

  • @tareq06
    @tareq06 Рік тому

    Thank you sir for this nice project....

  • @alejandroyar
    @alejandroyar 2 роки тому

    Great work, I hope view more projects soon

    • @CodingNepal
      @CodingNepal  2 роки тому

      More to come!

    • @user-ym5pw6me1f
      @user-ym5pw6me1f Рік тому

      thank you for the valuable information. But I want to ask you .. How can you put a link to an image in the background of the canvas and paint on it while saving the image for later. Please can you provide its code
      Help me adjust it !

  • @karishmachetri3757
    @karishmachetri3757 2 роки тому

    Wao very nice

  • @amircahyadi9219
    @amircahyadi9219 2 роки тому

    This is so cool dude ❤️😘 👍

  • @satendra8617
    @satendra8617 2 роки тому

    excellent bhai

  • @sweethomes674
    @sweethomes674 Рік тому

    Excellent 😊Thank you🕊

  • @aayush135
    @aayush135 Рік тому

    Amazing tutorial!!

  • @ryzenae
    @ryzenae 2 роки тому +1

    Make a tutorial on Skeleton

  • @getsetalk
    @getsetalk 2 роки тому

    Wow amazing

  • @shoxjahonshuhratov4691
    @shoxjahonshuhratov4691 8 місяців тому

    thank you bro
    😊

  • @yubiroaster6285
    @yubiroaster6285 2 роки тому

    Wow nice ❤️

  • @COFFY_GAMING
    @COFFY_GAMING 2 роки тому

    nice project sir

  • @ashishpatel6078
    @ashishpatel6078 2 роки тому

    Best video sir

  • @tarekahmed8388
    @tarekahmed8388 2 роки тому

    you are genius bro💝

  • @sofunny7984
    @sofunny7984 2 роки тому

    Nice work dude !!😉👏👏

  • @mdjafar4666
    @mdjafar4666 Рік тому

    excellent

  • @aaeonCodes
    @aaeonCodes 2 роки тому

    Excellent work 👌🔥

  • @mdhossen7082
    @mdhossen7082 2 роки тому

    Wow, very beneficial,
    Thanks

  • @lucasvillani5484
    @lucasvillani5484 6 місяців тому

    Hmmmm really cool, but what about those spikes that appear near the lines when drawing?

  • @Weezytube
    @Weezytube Рік тому

    awesome

  • @codedwebs
    @codedwebs 2 роки тому

    Very good work bro. 😎

  • @kalahari8295
    @kalahari8295 2 роки тому

    Favourite project

  • @superteacher123
    @superteacher123 8 місяців тому

    Great tutorial! Is it possible to add images in the canvas to annotate, as well as typing tool?

  • @sasireddypolimera
    @sasireddypolimera 2 роки тому

    U made html css js easy for us 😁😁🤝🤝

  • @adriandev6516
    @adriandev6516 2 роки тому

    Waooo 😍

  • @hostingvosting8162
    @hostingvosting8162 2 роки тому

    Awesome Video

  • @songcroft6026
    @songcroft6026 7 місяців тому

    am learning from the video but i get error Cannot read properties of null (reading 'classList') from script can you help me

  • @cosmosapiens9
    @cosmosapiens9 11 місяців тому +1

    Hey @CodingNepal, I love your tutorial, thanks so much for sharing! How would you add a typing tool to also write text, and select tool to be able to move the drawings / objects around? Thanks in advance, I am so looking forward to your feedback

  • @mdms4549
    @mdms4549 2 роки тому

    Prefect job!!

  • @cyanuranus6456
    @cyanuranus6456 7 місяців тому

    Like. Can You Even Code a Painting App That Also Can Use Transparent Background for Painting?

  • @Creative_Express1
    @Creative_Express1 11 днів тому

    Can you build a simple functional Photoshop clone?

  • @bluestar3639
    @bluestar3639 2 місяці тому

    It doesn't work with digital pen (stylus). Only mouse work. We need digital pen working canvas program.

  • @josephcieplak8920
    @josephcieplak8920 2 роки тому

    Awesome!!

  • @keshavgarg8407
    @keshavgarg8407 8 місяців тому

    Can you make a tutorial on making it a collaborative space and users can see it in real time

  • @UmarJAN-bz2nq
    @UmarJAN-bz2nq Місяць тому

    Thanks

  • @montramedia
    @montramedia Рік тому

    how do i get the dots out th ul plz

  • @angelemil
    @angelemil 2 роки тому

    Great your videos, I would like you to make a complete social network with adding friends, that would be great, greetings.

  • @cyanuranus6456
    @cyanuranus6456 7 місяців тому

    Can You Even Code a Painting App That Works like Krita, IbisPaintX and SketchBook?

  • @coding_with_mayavi0
    @coding_with_mayavi0 2 роки тому +1

    Bro ware to study javascript freee

  • @zigaudrey
    @zigaudrey Рік тому

    That's give me the idea on how Drawing Webshare save the canvas as a file. But does it has to always be a JPG?

  • @lensvictor
    @lensvictor Рік тому

    Very helpful

  • @al-aminsheikh6988
    @al-aminsheikh6988 2 роки тому +1

    Excelente project. but can't download images.

    • @CodingNepal
      @CodingNepal  2 роки тому

      Do you mean you can't save the drawings as images..?

  • @Softtures
    @Softtures Рік тому

    Can I use HTML5 canvas in react native?

  • @shedosa5731
    @shedosa5731 Рік тому

    Awesome content, how do you insert a working ruler

  • @ivanmenseguet8130
    @ivanmenseguet8130 5 місяців тому

    Thanks

  • @cesarcastroguzman5213
    @cesarcastroguzman5213 Рік тому

    For this app, how would you reccomend I implement a undo and redo functionality?

  • @cheemskememes
    @cheemskememes 2 роки тому +1

    hello sir please help me . i am using ur code for downloading yt videos .. its downloading in my pc but when i try it in my phone the video is downloaded as a file with .html extension
    plz help me to fix this

    • @CodingNepal
      @CodingNepal  2 роки тому

      Which video you're talking about..?

  • @graybab
    @graybab Рік тому

    How would I implement something like a "ctrl+Z"/undo feature?

  • @SaddamHussain-ne5mi
    @SaddamHussain-ne5mi Рік тому

    Can you please add dynamic text to the existing tutorial?

  • @hulashmahto99
    @hulashmahto99 2 роки тому +1

    Photo ke uper naam likhe

  • @anhhoccoder5358
    @anhhoccoder5358 2 роки тому

    From Vietnam

  • @unknownm9762
    @unknownm9762 10 місяців тому

    hi, im at this part @7:24 but it doesnt show my board extending. can i get any help please

  • @graphic.shashank
    @graphic.shashank Рік тому

    Hello sir! I'm working on a similar project and I wanted to add a write tool funtion by which we can type something in the canvas can you please help me with that?

  • @Codingindesk
    @Codingindesk 2 роки тому +1

    hindi use karoo broo thechnical thapa v hin m deta h content🔥🇮🇳🔥🇮🇳🇮🇳🇮🇳🇮🇳

  • @harveerSingh-iy9xz
    @harveerSingh-iy9xz 2 роки тому

    Please explain all working of components for more understanding😇😇😇😇😇😇😇

    • @CodingNepal
      @CodingNepal  2 роки тому +1

      Okay I'll try my best in the upcoming videos

  • @dunna25
    @dunna25 2 роки тому

    Hi. Can you make a javascript, php, css advanded, reactjs... tutorial video soon? Please

  • @user-kq7mh2rj6y
    @user-kq7mh2rj6y Рік тому

    how to get this app mobile compatible (Responsive in mobile)

  • @ahmedatcha6326
    @ahmedatcha6326 2 роки тому

    ❤️❤️

  • @bertpanerio1477
    @bertpanerio1477 4 місяці тому

    hi! project's great.... but is this responsive?

  • @PallaviNagarkar
    @PallaviNagarkar 10 місяців тому

    How can I insert an image and draw on top of it?

  • @TechWithSaif.
    @TechWithSaif. 2 роки тому

    index.html file doesn't work in mobile phone why???

  • @ashishpatel6078
    @ashishpatel6078 2 роки тому

    Please make video on react js also

  • @mmawithbunty4161
    @mmawithbunty4161 Рік тому +1

    Where is the source code for this project

  • @lv_5782
    @lv_5782 Рік тому

    Bro... How to draw parallelogram and square using mouse bro?

  • @WissamYamout
    @WissamYamout Рік тому

    how to make it work on mobile

  • @romapping245
    @romapping245 2 роки тому

    Please make a map like google maps

  • @AdnanErlansyah-nx7xp
    @AdnanErlansyah-nx7xp Рік тому

    Sir how about in mobile version?

  • @stihjedneklinke8485
    @stihjedneklinke8485 Рік тому +1

    How can we move shapes ? 😏

    • @TDRU_HD
      @TDRU_HD Місяць тому

      I think there should be an object for each shape drawn that has some coordinates and a mouse event that is attached to canvas based on coordinates a shape is within, that shape to be moved.

    • @TDRU_HD
      @TDRU_HD Місяць тому

      And redraw (refresh) what's on canvas.

  • @codingtrap5389
    @codingtrap5389 Рік тому

    How to add text to the drawing???? Plz reply

  • @sobitprasad7335
    @sobitprasad7335 2 роки тому

    can you make a code editor like vscode