Вопрос по холстовой анимации и движению устройства

Question

Я хочу реализовать перемещение устройства на холст таким образом, чтобы при перемещении телефона холст также перемещался вдоль осей x и y, чтобы холст мог отображать больше изображений. Но я не могу понять, как это сделать с помощью JavaScript. Нужно ли сначала создавать анимацию холста и добавлять к ней прослушиватель событий движения устройства? Если так, то как мне объединить код анимации с кодом движения моего устройства (все это ускорение). Или я просто добавляю прослушиватель событий движения устройства на холст, чтобы он двигался? У меня такое чувство, что мне сначала нужно написать анимацию, но я не уверен, что я прав.

Надеюсь, мое объяснение имеет смысл. Спасибо!

Answer 1

var canvas = document.createElement('canvas');
window.addEventListener('devicemotion', function(event) {
  canvas.style.left = event.acceleration.x + 'px';
  canvas.style.top = event.acceleration.y + 'px';
});