Html5 canvas 如何使对象捕捉到html5画布中的某个位置？

我正在考虑使用html5画布和JavaScript制作一个拼图游戏。我已经准备好了图像（片段），它们是可拖动的，但我希望片段的行为就像它们在网格上一样，这样当您在拖动图像时单击并按住图像时，它只能放置在3x3网格内的某些瓷砖上

以前在Stack上也问过类似的问题，但唯一的回答是drupal模块，我没有使用drupal。我在网上找到了一个类似的解决方案，它使用Asp.net，但我希望在前端解决所有问题，如果我必须使用一些服务器端代码，我只知道PHP

画布的renderGrid函数似乎只是绘制了一个网格，但并没有使它能够将对象捕捉到特定的位置

---

有人知道怎么做吗？

在设置坐标时使用divide/floor down数学。例如，对于每24个像素，将x隔开：

   var gridx = Math.floor(x/24)*24; 

---

设置坐标时使用“分割/地板向下”数学。例如，对于每24个像素，将x隔开：

   var gridx = Math.floor(x/24)*24;