Summary
This chapter explains how to use velocity and acceleration to update object positions over time and apply collision detection to simulate basic physics interactions.

General domain of usage
Canvas animation

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHN0eWxlPgogICAgICAjY2FudmFzIHsKICAgICAgICBib3JkZXI6IDJweCBzb2xpZCAjNDQ0OwogICAgICAgIGJhY2tncm91bmQ6ICNmYWZhZmE7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGNhbnZhcyBpZD0iY2FudmFzIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjI1MCI+PC9jYW52YXM+CgogICAgPHNjcmlwdD4KICAgICAgY29uc3QgY2FudmFzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImNhbnZhcyIpOwogICAgICBjb25zdCBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgiMmQiKTsKCiAgICAgIC8vIEJhbGwgd2l0aCB2ZWxvY2l0eSArIGFjY2VsZXJhdGlvbiAoZ3Jhdml0eSkKICAgICAgbGV0IGJhbGwgPSB7CiAgICAgICAgeDogMTAwLAogICAgICAgIHk6IDUwLAogICAgICAgIHJhZGl1czogMjAsCiAgICAgICAgdng6IDIsIC8vIGhvcml6b250YWwgdmVsb2NpdHkKICAgICAgICB2eTogMCwgLy8gdmVydGljYWwgdmVsb2NpdHkKICAgICAgICBheTogMC4yIC8vIGdyYXZpdHkgYWNjZWxlcmF0aW9uCiAgICAgIH07CgogICAgICBmdW5jdGlvbiB1cGRhdGUoKSB7CiAgICAgICAgYmFsbC52eSArPSBiYWxsLmF5OyAvLyBhcHBseSBncmF2aXR5CiAgICAgICAgYmFsbC54ICs9IGJhbGwudng7IC8vIHVwZGF0ZSBob3Jpem9udGFsIHBvc2l0aW9uCiAgICAgICAgYmFsbC55ICs9IGJhbGwudnk7IC8vIHVwZGF0ZSB2ZXJ0aWNhbCBwb3NpdGlvbgogICAgICB9CgogICAgICBmdW5jdGlvbiBkcmF3KCkgewogICAgICAgIGN0eC5jbGVhclJlY3QoMCwgMCwgY2FudmFzLndpZHRoLCBjYW52YXMuaGVpZ2h0KTsKCiAgICAgICAgY3R4LmJlZ2luUGF0aCgpOwogICAgICAgIGN0eC5hcmMoYmFsbC54LCBiYWxsLnksIGJhbGwucmFkaXVzLCAwLCBNYXRoLlBJICogMik7CiAgICAgICAgY3R4LmZpbGxTdHlsZSA9ICJibHVlIjsKICAgICAgICBjdHguZmlsbCgpOwogICAgICAgIGN0eC5jbG9zZVBhdGgoKTsKICAgICAgfQoKICAgICAgZnVuY3Rpb24gbG9vcCgpIHsKICAgICAgICB1cGRhdGUoKTsKICAgICAgICBkcmF3KCk7CiAgICAgICAgcmVxdWVzdEFuaW1hdGlvbkZyYW1lKGxvb3ApOwogICAgICB9CgogICAgICBsb29wKCk7CiAgICA8L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

In canvas animation, **velocity** describes how quickly and in what direction an object's position changes over time. **Acceleration** is the rate at which velocity itself changes—this allows for effects like speeding up or slowing down. A common form of acceleration is **gravity**, which constantly increases the downward velocity of an object, making its motion appear more realistic. By updating an object's position with its velocity, and its velocity with acceleration, you can simulate basic physics like falling, bouncing, or sliding.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHN0eWxlPgogICAgICAjY2FudmFzIHsKICAgICAgICBib3JkZXI6IDJweCBzb2xpZCAjNDQ0OwogICAgICAgIGJhY2tncm91bmQ6ICNmYWZhZmE7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGNhbnZhcyBpZD0iY2FudmFzIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjI1MCI+PC9jYW52YXM+CgogICAgPHNjcmlwdD4KICAgICAgY29uc3QgY2FudmFzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImNhbnZhcyIpOwogICAgICBjb25zdCBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgiMmQiKTsKCiAgICAgIC8vIFNhbWUgYmFsbCBvYmplY3QKICAgICAgbGV0IGJhbGwgPSB7CiAgICAgICAgeDogMTAwLAogICAgICAgIHk6IDUwLAogICAgICAgIHJhZGl1czogMjAsCiAgICAgICAgdng6IDIsCiAgICAgICAgdnk6IDAsCiAgICAgICAgYXk6IDAuMgogICAgICB9OwoKICAgICAgZnVuY3Rpb24gdXBkYXRlKCkgewogICAgICAgIC8vIEFwcGx5IGdyYXZpdHkKICAgICAgICBiYWxsLnZ5ICs9IGJhbGwuYXk7CgogICAgICAgIC8vIE1vdmUgYmFsbAogICAgICAgIGJhbGwueCArPSBiYWxsLnZ4OwogICAgICAgIGJhbGwueSArPSBiYWxsLnZ5OwoKICAgICAgICAvLyAtLS0gQ29sbGlzaW9uIHdpdGggbGVmdC9yaWdodCB3YWxscyAtLS0KICAgICAgICBpZiAoYmFsbC54IC0gYmFsbC5yYWRpdXMgPCAwKSB7CiAgICAgICAgICBiYWxsLnggPSBiYWxsLnJhZGl1czsKICAgICAgICAgIGJhbGwudnggKj0gLTE7CiAgICAgICAgfQogICAgICAgIGlmIChiYWxsLnggKyBiYWxsLnJhZGl1cyA+IGNhbnZhcy53aWR0aCkgewogICAgICAgICAgYmFsbC54ID0gY2FudmFzLndpZHRoIC0gYmFsbC5yYWRpdXM7CiAgICAgICAgICBiYWxsLnZ4ICo9IC0xOwogICAgICAgIH0KCiAgICAgICAgLy8gLS0tIENvbGxpc2lvbiB3aXRoIHRvcC9ib3R0b20gd2FsbHMgLS0tCiAgICAgICAgaWYgKGJhbGwueSAtIGJhbGwucmFkaXVzIDwgMCkgewogICAgICAgICAgYmFsbC55ID0gYmFsbC5yYWRpdXM7CiAgICAgICAgICBiYWxsLnZ5ICo9IC0xOwogICAgICAgIH0KICAgICAgICBpZiAoYmFsbC55ICsgYmFsbC5yYWRpdXMgPiBjYW52YXMuaGVpZ2h0KSB7CiAgICAgICAgICBiYWxsLnkgPSBjYW52YXMuaGVpZ2h0IC0gYmFsbC5yYWRpdXM7CiAgICAgICAgICBiYWxsLnZ5ICo9IC0xOwogICAgICAgIH0KICAgICAgfQoKICAgICAgZnVuY3Rpb24gZHJhdygpIHsKICAgICAgICBjdHguY2xlYXJSZWN0KDAsIDAsIGNhbnZhcy53aWR0aCwgY2FudmFzLmhlaWdodCk7CgogICAgICAgIGN0eC5iZWdpblBhdGgoKTsKICAgICAgICBjdHguYXJjKGJhbGwueCwgYmFsbC55LCBiYWxsLnJhZGl1cywgMCwgTWF0aC5QSSAqIDIpOwogICAgICAgIGN0eC5maWxsU3R5bGUgPSAiYmx1ZSI7CiAgICAgICAgY3R4LmZpbGwoKTsKICAgICAgICBjdHguY2xvc2VQYXRoKCk7CiAgICAgIH0KCiAgICAgIGZ1bmN0aW9uIGxvb3AoKSB7CiAgICAgICAgdXBkYXRlKCk7CiAgICAgICAgZHJhdygpOwogICAgICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZShsb29wKTsKICAgICAgfQoKICAgICAgbG9vcCgpOwogICAgPC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

By combining **velocity**, **acceleration**, and **collision detection**, you can build more complex and engaging animations. Extending these basic physics principles lets you simulate **friction**, **elastic collisions**, or even multiple interacting objects. As you add more rules, your canvas animations can become as realistic or imaginative as you like, supporting anything from bouncing balls to full-featured games.

What does velocity represent in the context of canvas animation physics?

What is a common way to detect a collision between a ball and the edge of the canvas?

Create visual and interactive projects with the HTML Canvas API using plain JavaScript. Draw shapes, render text, work with images, and control colors, gradients, and pixels. Animate objects, handle user input, and build simple games and visual effects step by step.

Learn how the Canvas element works and how to access its drawing context. Work with coordinates and master essential drawing techniques for lines, shapes, and paths. Build the foundation needed for everything from graphics to games.

Enhance your visuals with text rendering, image drawing, gradients, and patterns. Explore the basics of pixel manipulation and add simple user interaction with mouse and keyboard input. Create richer and more expressive canvas graphics.

Use the Canvas API to animate objects, simulate motion, and build interactive experiences. Combine physics, drawing operations, and input handling to create small games and visual effects. Apply all your skills in fun, practical mini-projects.

Motion and Collisions Physics

1. What does velocity represent in the context of canvas animation physics?

2. What is a common way to detect a collision between a ball and the edge of the canvas?

Awesome!

Motion and Collisions Physics

1. What does velocity represent in the context of canvas animation physics?

2. What is a common way to detect a collision between a ball and the edge of the canvas?