It is necessary that the falling dash scattered when you hover the mouse

canvas.addEventListener("mousemove", function(e) { pos_x = e.clientX + 10, pos_y = e.clientY + 10 });

Does not work. What is wrong here?

https://jsfiddle.net/Nata_Hamster/u6dmoLrt/3/

  • Open the console, your canvas variable throws the Cannot read property 'addEventListener' of undefined . - XelaNimed

2 answers 2

As already answered, the listener should be in the init method, so where the canvas is now located is not yet defined. But besides, simply changing x / y in the listener will not work as each dash has its own x / y and will have to change it in each dash. And this should be done not in the listener, but in the animate but as soon as the mouse stops moving, the lines will stop animate as well.

I wrote here a version of your code with the changes that I listed and with a small addition and cleaning of the code:

https://jsfiddle.net/u1qoc806/

    Place the canvas.addEventListener... code inside the init function after the canvas = document.getElementById("drawingCanvas"); .