Preventing Default Keyboard Behavior

When relying on the keyboard, the thing you need to keep in mind is that everything from your browser to your operating system is listening to the keyboard as well. Strange and unexpected things happen when your keyboard is used. In our case, the arrow keys are used to scroll your page up and down (and occasionally left and right). Even if users have their focus on the canvas, tapping the arrow keys will cause your entire page to scroll if your content gets large enough to display scrollbars. You don’t want that.

The way you fix this is very simple. In your moveSomething function (aka the event handler), simply add a call to preventDefault as shown in line 16:

Get hands-on with 1200+ tech skills courses.