Create a simple drawing app using javascript and HTML5 canvas

Поделиться
HTML-код
  • Опубликовано: 24 янв 2025

Комментарии • 39

  • @MotionAnimation-rj8ho
    @MotionAnimation-rj8ho Месяц назад

    Thank you very much for your help, it helped me a lot in creating the application

  • @samdavepollard
    @samdavepollard 2 года назад +2

    great job, Adam
    many thanks for sharing your knowledge
    subbed

  • @dejankarakasevic3791
    @dejankarakasevic3791 3 года назад +6

    This is amazing please keep it up

  • @zainul_abid
    @zainul_abid Год назад +1

    stratX and startY variable never use?

  • @jamiealex3504
    @jamiealex3504 2 месяца назад

    Very helpful

  • @muratusubaliev3533
    @muratusubaliev3533 6 месяцев назад

    Nice informative content! Thank you!. I was searching for the web technology behind web application in which user able to create shapes, duplicating them, copy/pasting, adding text box and move it/ resize it vice versa. Like in web apps: mapbox, figma, online powerpoint, lucid charts etc...
    I do not know where to start.

  • @puno9585
    @puno9585 Год назад +2

    Hi! Is it possible to set the starting stroke color other different than black? Thanks a lot! Very nice video.

    • @jonnymoebjerg
      @jonnymoebjerg Год назад +2

      Hi! In the .js file, put this in:
      //Set stroke HTML element value
      document.getElementById("stroke").value = "#ffd500";
      //Set actual stroke color
      ctx.strokeStyle = "#ffd500";

    • @puno9585
      @puno9585 Год назад +1

      @@jonnymoebjerg Thanks a lot, mate!

    • @jonnymoebjerg
      @jonnymoebjerg Год назад +1

      @@puno9585 You are welcome! :) Feel free to ask me more questions.

  • @rayyanabdulwajid7681
    @rayyanabdulwajid7681 Год назад +1

    Can you please add a feature to use an eraser and erase the stuff that we want

  • @Princeconceptdesigns
    @Princeconceptdesigns Год назад

    How can I add eraser

  • @uginh2rov798
    @uginh2rov798 2 года назад

    If you draw on a wacom tablet, then the line makes strange loops (first jumps forward, then takes a few steps back)

  • @hossamhatem6092
    @hossamhatem6092 Год назад

    hey dude , can you tell me the name of the VS CODE theme you use please?

  • @blueberry1874
    @blueberry1874 2 года назад

    is it possible to add a stabiliser to the line?

  • @Adilxec
    @Adilxec Год назад

    can we add this app in our website ?

  • @hudamulla9050
    @hudamulla9050 Год назад

    How to add undo tool in this

  • @phucphanhoang1918
    @phucphanhoang1918 3 года назад

    I can't use it for mobile devices , you can help me ?

  • @marcfauve6971
    @marcfauve6971 2 года назад

    Merci Beaucoup :)

  • @oandrezin3091
    @oandrezin3091 10 месяцев назад

    Sounds stupid, but how can i make it so the lines head the opposite way the mouse goes?

  • @GamerWhoTouchedGrass
    @GamerWhoTouchedGrass 2 года назад

    How to fill?

  • @4nija
    @4nija 2 месяца назад

    When can I be this good…JavaScript is a whole lot

    • @rubul6105
      @rubul6105 2 месяца назад

      Its easy write lots of code and try to write first on your own it will take hours to do it on your own but your mind will adapt and grow

  • @siyapatil4098
    @siyapatil4098 2 года назад

    what does e => mean?

  • @BenoitAdam2
    @BenoitAdam2 2 года назад

    Nice, how to save the image then ?

    • @CanadianCatDaddy
      @CanadianCatDaddy 2 года назад +3

      get your phone, take a pic, and send to 5 friends for backup

  • @rohansharma555
    @rohansharma555 2 года назад +3

    How do you get the drawing to work on mobile devices?

    • @yashakayash4888
      @yashakayash4888 2 года назад +1

      Use touchdown, touchmove and other touch events rather than using click, change etc....

    • @graybab
      @graybab 2 года назад +3

      Replace "mousemove", "mousedown", etc. with "pointermove", "pointerdown", etc. etc.
      And don't forget to add: "touch-action: none;" to your css for the canvas or it'll be glitchy.

    • @vaibhavjain79
      @vaibhavjain79 Год назад

      @@graybab thanks

  • @jnvsexam
    @jnvsexam 3 года назад

    Sir please start app developer series

  • @csr4969
    @csr4969 3 года назад

    sir i want code of this

    • @JsAcademyOfficial
      @JsAcademyOfficial  3 года назад +1

      The source code is available in the video's description

    • @yavorgerdzhikov-velomotori
      @yavorgerdzhikov-velomotori 2 года назад

      @@JsAcademyOfficial Hi guys!
      How can I get one piece of code to put on my website and start working? I am confused to be honest:) Any idea?

  • @CanadianCatDaddy
    @CanadianCatDaddy 2 года назад

    mobile friendly?

    • @JsAcademyOfficial
      @JsAcademyOfficial  2 года назад

      To make it mobile friendly you should use gesture support I’d probably choose hammerJs