clipping displacement in canvas javascript

I'm trying to create a two-dimensional board game with canvas for practice. The goal is to have a game with only html, javascript and php.

I made a first canvas which takes up the entire board. Currently my second canvas, contains a round pawn which moves as well as a clipping done with the clip () method. My problem concerns the second canvas. I would like to be able to ensure that my clipping follows the position of the pawn. But I can't move the clipping so it stays in the same place causing my pawn to appear and then disappear.

Could you tell me how to move this clipping please?

Thank you in advance.

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);