How can i make a requestAnimationFrame method modular?

Question

I wrote a simple function like below to animate the canvas background when mousemovement occurs close to edges and sides

World.js file:

function onMouseMove(e) {
    x = window.scrollX+e.clientX - (window.scrollX + canvas_planets.getBoundingClientRect().left);
    y = window.scrollY+e.clientY - (window.scrollY + canvas_planets.getBoundingClientRect().top);
    if(movementStatus){
        pixels=3;
        moveCanvas();
    }
}
function moveCanvas() {
    movementStatus=false;
    // left top corner
    if(x <= 50 && y <= 50){
        if (canvasPoint_X > 0 && canvasPoint_Y > 0){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X-pixels;
            canvasPoint_Y = canvasPoint_Y-pixels;
        }else{
            movementStatus =true;
            return;
        }
    }
    //left side
    if(x <= 50 && y > 50 && y < 450){
        if (canvasPoint_X > 0){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X= canvasPoint_X-pixels;
        }else{
            movementStatus =true;
            return;
        }
    }
    //left bottom corner
    if(x <= 50 && y >= 450){
        if (canvasPoint_X > 0 && canvasPoint_Y < (imageHeight-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X-pixels;
            canvasPoint_Y = canvasPoint_Y+pixels;
        }else{
            movementStatus =true;
            return;
        }
    }
    //top side
    if(x > 50 && x <= 450 && y <= 50){
        if (canvasPoint_Y > 0){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_Y = canvasPoint_Y-pixels;
        }else{
            movementStatus =true;
            return;
        }
    }
    //bottom side
    if(x > 50 && x <= 450 && y >= 450){
        if (canvasPoint_Y < (imageHeight-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_Y = canvasPoint_Y+pixels;
        }else{
            movementStatus =true;
            return;
        }
    }
    //right top corner
    if(x > 450 && y <= 50){
        if (canvasPoint_Y > 0 && canvasPoint_X < (imageWidth-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X+pixels;
            canvasPoint_Y = canvasPoint_Y-pixels;
        }else{
            movementStatus =true;
            return;
        }
    }
    //right side
    if(x > 450 && y > 50 && y < 450){
        if (canvasPoint_X < (imageWidth-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X+pixels;
        }else{
            movementStatus =true;
            return;
        }
    }
    //right bottom corner
    if(x > 450 && y >= 450){
        if (canvasPoint_Y < imageHeight-500 && canvasPoint_X < (imageWidth-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X+pixels;
            canvasPoint_Y = canvasPoint_Y+pixels;
        }else{
            movementStatus =true;
            return;
        }
    }
    if (x > 495 || x < 5 || y >495 || y < 5){
        movementStatus =true;
        return;
    }
    requestAnimationFrame(moveCanvas);
}

After this to make my script more readable i decided to put movecanvas method in a seperate js file named Mycanvas.js and then edited the code according to that like below:

World.js file:

function onMouseMove(e) {
    x = window.scrollX+e.clientX - (window.scrollX + canvas_planets.getBoundingClientRect().left);
    y = window.scrollY+e.clientY - (window.scrollY + canvas_planets.getBoundingClientRect().top);
    if(movementStatus){
        pixels=3;
        [movementStatus, canvasPoint_X, canvasPoint_Y] = myCanvas.moveCanvas(x,y,canvasPoint_X,canvasPoint_Y,ctx_stars,pixels,StarsImg,imageHeight,imageWidth);
    }
}

Mycanvas.js file:

export let movementStatus;
export const moveCanvas = (x,y,canvasPoint_X,canvasPoint_Y,ctx_stars,pixels,StarsImg,imageHeight,imageWidth) =>{
    movementStatus=false;
    if(x <= 50 && y <= 50){
        if (canvasPoint_X > 0 && canvasPoint_Y > 0){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X-pixels;
            canvasPoint_Y = canvasPoint_Y-pixels;
        }else{
            movementStatus =true;
            return movementStatus,canvasPoint_X,canvasPoint_Y;
        }
    }
    if(x <= 50 && y > 50 && y < 450){
        if (canvasPoint_X > 0){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X= canvasPoint_X-pixels;
        }else{
            movementStatus =true;
            return movementStatus,canvasPoint_X,canvasPoint_Y;
        }
    }
    if(x <= 50 && y >= 450){
        if (canvasPoint_X > 0 && canvasPoint_Y < (imageHeight-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X-pixels;
            canvasPoint_Y = canvasPoint_Y+pixels;
            console.log("sol alt köşe")
        }else{
            movementStatus =true;
            return movementStatus,canvasPoint_X,canvasPoint_Y;
        }
    }
    if(x > 50 && x <= 450 && y <= 50){
        if (canvasPoint_Y > 0){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_Y = canvasPoint_Y-pixels;
        }else{
            movementStatus =true;
            return movementStatus,canvasPoint_X,canvasPoint_Y;
        }
    }
    if(x > 50 && x <= 450 && y >= 450){
        if (canvasPoint_Y < (imageHeight-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_Y = canvasPoint_Y+pixels;
        }else{
            movementStatus =true;
            return movementStatus,canvasPoint_X,canvasPoint_Y;
        }
    }
    //sağ üst köşe
    if(x > 450 && y <= 50){
        if (canvasPoint_Y > 0 && canvasPoint_X < (imageWidth-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X+pixels;
            canvasPoint_Y = canvasPoint_Y-pixels;
        }else{
            movementStatus =true;
            return movementStatus,canvasPoint_X,canvasPoint_Y;
        }
    }
    if(x > 450 && y > 50 && y < 450){
        if (canvasPoint_X < (imageWidth-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X+pixels;
        }else{
            movementStatus =true;
            return movementStatus,canvasPoint_X,canvasPoint_Y;
        }
    }
    if(x > 450 && y >= 450){
        if (canvasPoint_Y < imageHeight-500 && canvasPoint_X < (imageWidth-500)){
            ctx_stars.clearRect(0, 0, 500, 500);
            ctx_stars.drawImage(StarsImg, canvasPoint_X, canvasPoint_Y, 500, 500, 0, 0, 500, 500);
            canvasPoint_X = canvasPoint_X+pixels;
            canvasPoint_Y = canvasPoint_Y+pixels;
        }else{
            movementStatus =true;
            return movementStatus,canvasPoint_X,canvasPoint_Y;
        }
    }
    if (x > 495 || x < 5 || y >495 || y < 5){
        movementStatus =true;
        return movementStatus,canvasPoint_X,canvasPoint_Y;
    }
    requestAnimationFrame(moveCanvas);
}

However after doing this, my working script stopped working and started to give me the fallowing error:

TypeError: Invalid attempt to destructure non-iterable instance

What am i doing wrong here?

Thanks in advance.

Answer 1

You are returning the elements incorrectly, you need to return your elements as an array instead return [movementStatus,canvasPoint_X,canvasPoint_Y]; as return movementStatus,canvasPoint_X,canvasPoint_Y; would return only canvasPoint_Y causing the error

function fn() {
  return [1, 2, 3];
}

[x, y, z] = fn();

console.log(x, y, z);

Edit: Not all paths of the function moveCanvas return an array, for example the last line of the function, consider storing the return value first and check if it is an array:

Problem

function fn() {
  if (false)
    return [1, 2, 3];
}

[x, y, z] = fn();

console.log(x, y, z);

Fix:

function fn() {
  if (false)
    return [1, 2, 3];
}

k = fn();

if (k != undefined) {
  console.log(...k);
} else {
  console.log(k);
}