Vanilla JS Custom Scrolling Example

Scrolling acceleration: When you let go it will continue to scroll some if you were dragging while letting go, then smoothly slow to a stop.
Bounce effect: When it hits the end it bounces a bit.
End feedback: When you try to scroll past the end, it will scroll a little to acknoweledge your attempt while showing that it's the end.
Support: Works on mobile inlcuding old phones (iOS 9) and old browsers (IE11)

Tower Swap
- A fun and addicting game. 1,000,000+ plays!
- Combines 2 genres: Tower Defense, and Match-3 Puzzle.
- Play on computer, and phones/tablets.
- No signup required. Loads fast. No forced ads.
Emoji Hunt
- Find the animal emoji before time runs out!
- Rougelike upgrade system.
- 100 levels.
- Play on desktop or mobile right in your browser.
Wording.fun
- Find as many words as you can before time runs out.
- Swipe to connect letters.
- Includes definitions of every word.
- Challenge friends to beat high scores.
Haiku Fangirl
- Made for a 1 week game competition.
- Game must have only one 128x128 texture, and load no other graphics.
- Gameboy style frame coded in CSS. No images or SVGs.
- Play on desktop or mobile.
- I coded it and managed a team of 5.
- Won 2nd place in the competition!

That's the end! More games are in development!

Why not just use a div with overflow: scroll and -webkit-overflow-scrolling: touch?

Because those rules are not supported well, and still buggy even on the latest iPhones. For example if you keep scrolling up/down quickly in a div, acceleration would randomly stop working.
If you want to simulate iPhone behavior on desktop browsers.
If you want to alter this to create custom scroll behavior that's the same on all devices.
If you don't want to use DOM at all for display, you'd need to have custom code similar to this in your canvas app.