Animating and dragging a canvas element to a specific point?

Question

JavaScript

For example , we have green and red squares drawn on canvas. How to make the green animation move to the unfilled block below, and the red one can also be moved with the mouse to the bottom unfilled block below it (and only there and nowhere else)?
In which direction to look and what can be read on this issue? It would be nice to see it all in an example.

Answer 1

You can read about animation here: https://learn.javascript.ru/js-animation
about drawing on canvas - https://developer.mozilla.org/ru/docs/Web/API/Canv...

Answer 2

1. You make a set interval with a frequency of 16ms and each tick changes the coordinates of the green cube by +1 pixel. You check the coordinates, if they match with the unshaded one, you delete the setinterval.
2. You check by coordinates, if the user clicked on the red block, hang up the handler on mousemove and change the coordinates of the red to the coordinates of the cursor position.