Javascript, I want my elements to only move in a specific path

I’m working on an app but there’s a background with dots that determines where my elements can be placed and moved. I illustrated what i want in Adobe XD.

App

The path of the red circle is what i want to achieve, the blue square is what I don’t want because it’s just placed anywhere.

So far, I created a html canvas, where i drew this dots with a for loop. I’ve been thinking about creating invisible areas but I don’t know what to implement in js.