Comment centrer un point d'une image à l'intérieur d'un canevas ?

J'ai une image que je montre sur une toile. Le premier défi pour moi était de redimensionner l'image afin qu'elle corresponde toujours à la div parent. J'y suis parvenu en faisant ceci :

const horizontalRatio = ctx.canvas.width / image.width;
const verticalRatio = ctx.canvas.height / image.height;
const ratio = Math.min(horizontalRatio, verticalRatio);
const centerShiftX = (ctx.canvas.width - image.width * ratio) / 2;
const centerShiftY = (ctx.canvas.height - image.height * ratio) / 2;
const scaledImageWidth = image.width * ratio;
const scaledImageHeight = image.height * ratio;

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(
  image,
  0,
  0,
  image.width,
  image.height,
  centerShiftX,
  centerShiftY,
  scaledImageWidth,
  scaledImageHeight,
);

Quelle que soit la hauteur ou la largeur de mon div parent, l'image s'affichera toujours en conservant complètement son rapport hauteur/largeur d'origine. Ce que je n'ai pas encore réussi à faire, c'est de centrer la vue sur un certain point de l'image.

Dans le monde réel, j'ai un formulaire avec des champs de saisie. J'ai aussi une image du formulaire (son scanné) et je connais les coordonnées de chaque champ de saisie sur l'image originale. Ainsi, lorsque je suis dans un champ de texte, je souhaite centrer les coordonnées de ce champ de saisie sur l'image. Lorsqu'aucun champ de saisie n'est ciblé, je souhaite afficher l'image telle qu'elle apparaît maintenant avec le code ci-dessus.

Code:

JS Bin

Visualisation

1. Image originale
2. La zone que je veux centrer
3. La nouvelle image avec la zone centrée