How to implement zooming in and out

Question

How does zooming in and out in a browser work? How to detect if 2 fingers are pinched or taken away? I did some things like if there are 2 fingers touched, i calculate the dist b/w them and push it into an array (in animation loop), and if the length of array is > 2 i splice (0, 1) (remove first element). Hence only 2 distances are stored in the array.
And then i check if 2nd dist in array is > than first dist. If it is, the fingers are taken away from each other, and i zoom in 1 unit. And if it's < i zoom out.
The problem with this is than when 2 fingers are pressed but not moved, it still zooms in/out. This does not happen in a browser page.

https://code.sololearn.com/Wzkk7spT55FZ/?ref=app this is the code if it helps. I'm using p5.js framework.

Answer 1

https://code.sololearn.com/WH5BLG2ql68X/?ref=app

Answer 2

Baron (Qyther) thank you very much! I'll try that.