User Interaction — Mouse, Keyboard and Touch

What is user interaction in animation?

When an animation responds to actions performed by the user.

What is a mouse event?

An event caused by mouse actions, such as moving or clicking.

What does mousemove mean?

The mouse pointer moves.

What does mousedown mean?

A mouse button is pressed down.

What does mouseup mean?

A mouse button is released.

What does click mean?

The user clicks.

What does keydown mean?

A keyboard key is pressed down.

What does keyup mean?

A keyboard key is released.

What does touchstart mean?

A finger first touches the screen.

What does touchmove mean?

A finger moves while touching the screen.

What does touchend mean?

A finger stops touching the screen.

What does addEventListener() do?

It tells JavaScript to listen for a specified event and run instructions when that event occurs.

What is a callback function in an event listener?

A function that runs when the specified event occurs.

What does event.offsetX represent?

The mouse pointer's horizontal position inside the canvas.

What does event.offsetY represent?

The mouse pointer's vertical position inside the canvas.

Why does Canvas need to redraw an object to move it?

Canvas draws pixels and does not automatically move previously drawn objects.

What is the usual animation interaction sequence?

Capture input, update the object's state, clear the canvas, redraw the object, and repeat.

What does clearRect() do?

It clears a rectangular area of the canvas.

What does requestAnimationFrame() do?

It asks the browser to schedule the animation function for another frame.

How can a circle follow the mouse?

Update its x and y coordinates using mouse event coordinates, then clear and redraw it in the animation loop.