Adjusting the Position
Explore how to move a shape on the HTML5 canvas by adjusting its position with keyboard inputs. Learn to use deltaX and deltaY variables to track movement offsets and update the drawing in real time. By the end, you'll be able to control a triangle drawn on the canvas using arrow keys, reinforcing fundamental interactive canvas programming concepts.
We'll cover the following...
It is time to tie together the triangle we’ve drawn with the code we just added for dealing with the arrow keys. What we are going to do is define two counter variables called deltaX and deltaY. What these variables will do is keep a count of how far to move our triangle as a result of arrow key presses. This may sound a bit confusing right now, but hang on tight!
First, let’s go ahead and define our ...