我正在尝试创建一个带有画布的二维棋盘游戏以供练习。我们的目标是开发一款只有html、javascript和php的游戏。
我做了第一块画布，它占据了整个木板。目前，我的第二块画布包含一个圆形棋子，它可以移动，也可以使用clip（）方法进行剪切。我的问题与第二张画布有关。我希望能够确保我的剪辑跟随典当的位置。但我不能移动剪辑，所以它停留在同一个地方，导致我的棋子出现，然后消失。
你能告诉我怎么移动这个夹子吗？
先谢谢你。

const goUp = 1;
const goDown = 2;
const goLeft = 3;
const goRight = 4;

var canvas = document.getElementById("pawn");
var ctx = canvas.getContext("2d");

var largeurProprietee = 60;
var hauteurProprietee = 90;
x = 45 + 90 + (8 * 60) + 90;
y = 30;
orientation = 1;
pawnHeight = 40;
pawnWidth = 40;

function drawPawn() {
  var image = new Image();
  image.src = 'img/' + 'zelda' + '/' + 'vert' + '.png'; //adresse de l'image
  image.onload = function() {
    ctx.drawImage(this, y, x, pawnHeight, pawnWidth);
  }
}

function shifting() {
  erasePrevious();
  cutOut();
  drawPawn();
  x--;
}

function erasePrevious() {

  var previousX;
  var previousY;

  if (orientation == 1) {
    previousX = x;
    previousY = y;
    ctx.clearRect(previousY, previousX, pawnHeight, pawnWidth);
  }
}

function cutOut() {

  var rayon = (pawnHeight / 2);
  var clipX = (x + rayon);
  var clipY = (y + rayon);

  ctx.beginPath();
  ctx.arc(clipY, clipX, rayon, 0, Math.PI * 2);
  ctx.clip();
}

setInterval(shifting, 10);