I've been self-studying HTML/CSS/JS. I read about Wa-tor. It's a population dynamics simulation which simulates fish and sharks breeding and predating. This seemed cool so I decided to implement it. I don't know much about javascript, my background is mostly in python and R.

Here's my implementation. Just hit Play. And here's the source code.

I had a lot of questions pop up while I was writing this. Some of them:

1. Did I take the right approach by using the Canvas? I considered SVG but read that Canvas is better for many entities, especially if I did one-to-one pixels. Would the next step be GL for this kind of thing?
2. Did I use JS's "class" system properly? I don't think I took full advantage of Fish and Shark inheriting from Animal.
3. Did I organize my files properly? I feel like three .js files may be overkill.
4. What does my code smell like?
5. Did I miss out on any helpful design patterns?

I don't have much experience doing this, so some guidance would be enormously helpful. Thank you.