How can I add a camera to my map consisting of images with javascript canvas?

I have a large 5250x2952 map(in png) and it consists of 35 parts. I was able to combine them. But I just couldn't figure out how to move it by dragging it. My map is so big that only one point appears on the screen.

I can get exactly the length between the place where he clicked dec the mouse and the place of his last movement.

But I can't do the rest. Can you help me? an example of what I would like to do: https://codepen.io/johndownie/pen/vxOwrx

My codes

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        overflow: hidden;
      }

      canvas {
        width: 100%;
        height: 100vh;
      }

      .drag {
        cursor: all-scroll;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>

    <script src="./assets/js/main.js"></script>
  </body>
</html>

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

const mapArea = {
  row: 35,
  column: 3,
};

const tileHeight = 984;
const tileWidth = 150;

function createMap() {
  //onloadImage
  for (let i = 0; i < mapArea.column; i++) {
    for (let j = 0; j < mapArea.row; j++) {
      const mapImage = new Image();
      mapImage.src = `./assets/images/map/${i}-${j}.jpg`;
      mapImage.onload = function () {
        context.drawImage(mapImage, tileWidth * j, tileHeight * i);
      };
    }
  }
}

let drag = false;
let mousePosition = {
  downX: 0,
  downY: 0,
  x: 0,
  y: 0,
};

canvas.addEventListener("mousemove", function (event) {
  mousePosition.x = event.x;
  mousePosition.y = event.y;

  if (drag) {
    const xDifference = mousePosition.downX - mousePosition.x;

    if (xDifference > 0) console.log(`${xDifference}px left`);
    else console.log(`${Math.abs(xDifference)}px right`);

    const yDifference = mousePosition.downY - mousePosition.y;

    if (yDifference > 0) console.log(`${yDifference}px top`);
    else console.log(`${Math.abs(yDifference)}px bottom`);

    // I need to move the image here.
  }
});

canvas.addEventListener("mousedown", function (event) {
  mousePosition.downX = event.x;
  mousePosition.downY = event.y;
  drag = true;
  toggleDrag(drag);
});

canvas.addEventListener("mouseup", function () {
  drag = false;
  toggleDrag(drag);
});

createMap();

/* Cursor drag toggle */
const toggleDrag = (value) => {
  if (value) canvas.classList.add("drag");
  else canvas.classList.remove("drag");
};

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW