How to make canvas animation move with phones using device motion

Question

I've managed to create a rotation animation for my canvas but now I want to add an event handler of device motion to make my canvas move as I move my phone. For example: now I translated my canvas to the middle point of the screen and start rotation. As I move my phone to left, I want my middle point to move left and vice versa as I move my phone to right.

I tried to add an event handler to my move function and use event.accelerationIncludingGravity.x to set up my starting point for canvas translation but it didn't work. I think the problematic part is cxt.translate(c.width / 2 - x, c.height / 2 - y); Can someone show me how to accomplish this? Here are my codes:

const c = document.getElementById("canvas");
c.width = window.innerWidth;
c.height = window.innerHeight;
const cxt = c.getContext('2d');

function draw() {
    var x1 = 0;
    var y1 = 80;
    var x2 = 80;
    var y2 = 0;
    var w = 240;
    var h = 80;

for (var i = 0; i < 4; i++) {
    cxt.fillStyle = "orange";
    cxt.fillRect(x1, y1, w, h);
    cxt.fillRect(x2, y2, h, w); 

    x1 -= 80;
    y1 += 160;
    x2 -= 80;
    y2 += 160;

    cxt.fillStyle = "darkred";
    cxt.fillRect(x1, y1, w, h);
    cxt.fillRect(x2, y2, h, w); 

    x1 += 240;
    y1 -= 80;
    x2 += 240;
    y2 -= 80;

    cxt.fillStyle = "black";
    cxt.fillRect(x1, y1, w, h);
    cxt.fillRect(x2, y2, h, w); 

    x1 -= 80;
    y1 += 160;
    x2 -= 80;
    y2 += 160;

    cxt.fillStyle = "blue";
    cxt.fillRect(x1, y1, w, h);
    cxt.fillRect(x2, y2, h, w); 

    x1 += 240;
    y1 -= 80;
    x2 += 240;
    y2 -= 80;

    cxt.fillStyle = "green";
    cxt.fillRect(x1, y1, w, h);
    cxt.fillRect(x2, y2, h, w); 

    x1 -= 80;
    y1 += 160;
    x2 -= 80;
    y2 += 160;

    cxt.fillStyle = "yellow";
    cxt.fillRect(x1, y1, w, h);
    cxt.fillRect(x2, y2, h, w); 

    x1 += 240;
    y1 -= 80;
    x2 += 240;
    y2 -= 80;
}


}

function fill() {
draw();
cxt.save();

cxt.translate(0, 400);
draw();
cxt.restore();
cxt.save();

cxt.translate(160, -320);
draw();
cxt.restore();
cxt.save();

cxt.translate(960, -320);
draw();
cxt.restore();
cxt.save();

cxt.translate(-1920, -960);
draw();
cxt.restore();
cxt.save();

cxt.translate(-480, 160);
draw();
cxt.save();

cxt.translate(-480, -1440);
draw();
cxt.save();

cxt.translate(-640, 80);
draw();
cxt.save();

cxt.translate(-640, 480);
draw();
cxt.save();
}

var degree = 0;
var requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
                        window.msRequestAnimationFrame;

function move(event) {
var x = event.accelerationIncludingGravity.x;
var y = event.accelerationIncludingGravity.y;

cxt.setTransform(1, 0, 0, 1, 0, 0);
cxt.clearRect(0, 0, c.width, c.height);

cxt.translate(c.width / 2 - x, c.height / 2 - y);
cxt.rotate(degree);
fill();

degree += 0.01;

requestAnimationFrame(move);
}

move(event);

window.addEventListener("devicemotion", move, true);

Answer 1

Use deviceMotionEvent.rotationRate instead of accleeration.

https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent/rotationRate

window.addEventListener("devicemotion", updateCanvas, true);


   function updateCanvas(event) {
         var rotation = event.rotationRate.gamma;
         requestAnimationFrame(rotateAndTranslate);


   }


   function rotateAndTranslate(rotation) {



          cxt.rotate(rotation);

         cxt.setTransform(1, 0, 0, 1, 0, 0);
         cxt.clearRect(0, 0, c.width, c.height);

         cxt.translate(c.width / 2 - x, c.height / 2 - y);
         fill();






        }