Как привязать тег <div id="result-container>" к подвижному canvas?

что у тебя делает моя фотка?

Вы можете использовать CSS-свойство position: absolute для тега <div id="result-container">, чтобы он был позиционирован относительно родительского элемента с position: relative. Затем вы можете использовать JavaScript, чтобы обновлять свойства top и left тега <div id="result-container">, чтобы он перемещался вместе с холстом. Например, если вы хотите, чтобы <div id="result-container"> находился в правом верхнем углу холста, вы можете использовать следующий код:

 const canvas = document.querySelector('canvas'); 
const resultContainer = document.querySelector('#result-container'); 
 
// Получить позицию холста 
const canvasRect = canvas.getBoundingClientRect(); 
 
// Обновить позицию resultContainer 
resultContainer.style.top = `${canvasRect.top}px`; 
resultContainer.style.left = `${canvasRect.right - resultContainer.offsetWidth}px`; 
 

Этот код получает текущую позицию холста и обновляет позицию <div id="result-container">, чтобы он находился в правом верхнем углу холста. Вы можете обновлять позицию <div id="result-container"> каждый раз, когда холст перемещается, чтобы он всегда находился в нужном месте. Однако, если вы используете библиотеку FaceAPI, то вам необходимо убедиться, что обновление позиции <div id="result-container"> происходит после того, как библиотека обновила позицию холста. Вы можете сделать это, например, используя функцию обратного вызова или промисы.

С помощью css