JS + Canvas: Animated Health Bar, Varying Speeds

Was playing Pokemon 8 (Sword/Shield) and noticed that the opponent pokemon's HP bar moved slower when it only had a little HP left. But I used the same attack, no crits, no atk/def stage changes. So the speed of the bar was limited so that the animation could play out for a set period of time. It made me wrongly think the pokemon was going to endure the hit due to slow bar depletion speed, kind of annoying misinformation >.> though just a chance roll of the numbers that made it so slow. But anyway that made me want to do a bar that has a variable change speed but eforced min/max speed.

P.S. I just today realized Hitmonchan & Hitmonlee -> Jackie Chan & Bruce Lee. I thought Hitmonchan was like -chan honorific in Japanese xD

This bar will be on a canvas (rather than a CSS transition,etc) In this, you can specify a number and hit/heal by that number. The HP bar will change in accordance to the settings set. Note: personally, I don't like the way Pokemon 8 HP bars can feel much slower when the bar is lower: this bar is still a little slower at low HP, but was made to lighten the effect: hitting 85% of HP twice in a row will be quick to deplete both times. On the bar, light green is HP and dark green is empty bar

	
	Default Animation Speed  (seconds, limited to [minSpeed,maxSpeed] inclusively)
	
	
min | max
   
Speed (seconds, min & max time the animation can go on for)
	 | 
	
	
current / max
   
Health
	 /