Canvas Drag & Drop Objects Tutorial | HTML5 Canvas JavaScript Tutorial [#10]

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 ธ.ค. 2024

ความคิดเห็น • 52

  • @cleisonsousa950
    @cleisonsousa950 2 ปีที่แล้ว +6

    Thanks for bringing this tutorial! congratulations it's great 🙃✌️

  • @framora7598
    @framora7598 3 หลายเดือนก่อน

    Thank you for making this great video! Super helpful 👍

  • @kqnesky_7516
    @kqnesky_7516 ปีที่แล้ว

    Masterclass, thank you for all !

  • @armer2001
    @armer2001 ปีที่แล้ว +3

    Life hack. On line 4 and 5, you don't have to do minus anything. Just set canvas style to display: block.

  • @princeashmir9430
    @princeashmir9430 2 ปีที่แล้ว +1

    which suggestion extension of vs code are you using in this tutorial ??

  • @sam-h5r6j
    @sam-h5r6j 7 หลายเดือนก่อน

    This was a great tutorial. Thanks! How would you tackle more complex shapes like irregular triangles etc.?

  • @NiketBahety
    @NiketBahety 11 หลายเดือนก่อน

    Is there a more optimal approach instead of drawing all shapes again everytime the mouse moves ?

  • @asfahim6882
    @asfahim6882 ปีที่แล้ว

    thank a lot, it helped me to get idea wich implement in my project

  • @petarvitanov2297
    @petarvitanov2297 ปีที่แล้ว

    Hello, would this work well if you have multiple objects? And what if objects are images ?

  • @laurapriewasser5703
    @laurapriewasser5703 2 ปีที่แล้ว +1

    Thank you for this great video ☺️ I have a question concerning the red square. What do I have to do to have a squared picture instead of the red area? And the image should‘t be dropped everywhere, just somewhere in a green area?

  • @satrughnasethisattuk
    @satrughnasethisattuk 2 ปีที่แล้ว +1

    Could you please mention what extension you have installed for showing the suggestions? I loved it.

    • @kreonovo
      @kreonovo 5 หลายเดือนก่อน

      pretty sure it is copilot

  • @franmoreno5984
    @franmoreno5984 ปีที่แล้ว

    Nice explanation, thanks!

  • @benyuanhu267
    @benyuanhu267 ปีที่แล้ว

    Thank you, I love your tutorial about canvas! Do you know how to draw a line with an arrow between these two objects on the canvas ? You know like a data flow, there is an endpoint on each object, and people can draw a line out of this endpoint and then point to another endpoint on the other objects

  • @AjeetPatel-p7e
    @AjeetPatel-p7e 2 หลายเดือนก่อน

    dude you saved me.

  • @marienoel1209
    @marienoel1209 2 ปีที่แล้ว +2

    amazing tutorial!!! Thanks a lot for all the explanations 💗😍🤩

  • @NOTHING-en2ue
    @NOTHING-en2ue ปีที่แล้ว

    very great tutorial ❤

  • @robertobaldizon8206
    @robertobaldizon8206 8 หลายเดือนก่อน

    Thanks. Very useful.

  • @dhruvrashiya8612
    @dhruvrashiya8612 2 ปีที่แล้ว +2

    I have a question that is eating me away...
    In mousemove function you defined a new variable let current_shape =shapes[current_shape_index] and then you made chages to that new variable current_shape.x and current_shape.y .
    But we can see that the chages getting reflected in the main variable shapes , why is this happening?

    • @one_bored_dude1798
      @one_bored_dude1798 ปีที่แล้ว +1

      a bit late but just found something related to your question in an stackoverflow post so thought I might share :D
      "My understanding is that this is actually very simple:
      - Javascript is always pass by value, but when a variable refers to an object (including arrays), the "value" is a reference to the object.
      - Changing the value of a variable never changes the underlying primitive or object, it just points the variable to a new primitive or object.
      - However, changing a property of an object referenced by a variable does change the underlying object."
      Here he passed a reference to an shape object and just adjusted properties of that object, therefore the original object was affected aswell.
      If he created a new shape with the basic properties of the object instead, changing that shape would not affect the original object anymore.

  • @필젠
    @필젠 2 ปีที่แล้ว

    Thank you for your video. You gave me what i was looking for.

  • @DaYroXy
    @DaYroXy ปีที่แล้ว

    Hello, make a tutorial on how can we implement something like a circle in the center of the screen and a line following the cursor when its close for example
    if cursor is 50px close to the middle canvas then connect cursor and canvas with a line when the cursor is 50px further then make the line dissaper

  • @umutdonmez2707
    @umutdonmez2707 2 ปีที่แล้ว

    Thank you for this video.

  • @Xlorate
    @Xlorate 2 ปีที่แล้ว

    Good work, my shapes failed to move after subtracting offset_x and offset_y, I assume js did not recognize them as numbers?

    • @migliorelli
      @migliorelli 8 หลายเดือนก่อน

      same

  • @jpgalinat7412
    @jpgalinat7412 ปีที่แล้ว

    Hello . Which EDITOR do you use ?

  • @gouthamharshith2399
    @gouthamharshith2399 2 ปีที่แล้ว

    Do we have a GitHub link for this video?

  • @Masirraj
    @Masirraj 2 ปีที่แล้ว

    Awesome tutorial keep working 🤙🤙

  • @aakashinfo949
    @aakashinfo949 ปีที่แล้ว

    Veri nice sir thanks

  • @ebrensi
    @ebrensi 2 ปีที่แล้ว

    Very good 👍

  • @pacific_punch1
    @pacific_punch1 6 หลายเดือนก่อน

    thank you!

  • @usaidkhan742
    @usaidkhan742 ปีที่แล้ว

    could you provide its source code? thanks

  • @ianschwartz08
    @ianschwartz08 6 หลายเดือนก่อน

    shape will not show up.

  • @tikka6554
    @tikka6554 2 ปีที่แล้ว +2

    what is your laptop?

    • @BananaCoding
      @BananaCoding  2 ปีที่แล้ว +1

      It’s a windows computer compiled by myself

    • @tikka6554
      @tikka6554 2 ปีที่แล้ว +1

      @@BananaCoding what it's specs?

  • @loukiidris9883
    @loukiidris9883 2 ปีที่แล้ว

    thanks bro

  • @ilyaserebryannikov858
    @ilyaserebryannikov858 2 ปีที่แล้ว +2

    i want that gist

  • @genddabowen9171
    @genddabowen9171 ปีที่แล้ว

    Pls make a chess game using a canvas

  • @rajkumar-gh4tq
    @rajkumar-gh4tq 2 ปีที่แล้ว

    source code please

  • @dovrilo
    @dovrilo ปีที่แล้ว +1

    if you just want the code then it's alright, but if you actually wanted to learn anything then this is not the best video for you. you were getting the explanations alright at some point, then down the line, it looked like we were just watching you code over your shoulder and mumbling the explanations. you were typing too fast, ill look for a better tutorial. I still don't understand how some of the mouse functions worked. but hey it just works I guess.

  • @mdmahfujarrahman6453
    @mdmahfujarrahman6453 7 หลายเดือนก่อน

  • @hansjerbydelana1624
    @hansjerbydelana1624 2 ปีที่แล้ว

    yoww

    • @BananaCoding
      @BananaCoding  2 ปีที่แล้ว

      Hi mate!

    • @hansjerbydelana1624
      @hansjerbydelana1624 2 ปีที่แล้ว

      @@BananaCoding I have question for you broo, Its normal to breakdown while you dont know how to fix your bug.? then can you make a video how to put map tile and sound effects when you make a game (sorry to my english )