Get the whole image with out scrolling in javascript, canvas

Question

Consider the following:

All of what you see is rendered on to a HTML 5 canvas. As you can see this image scrolls. As the character walks around the map will scroll around.

Consider the actual image:

This image is the actual image of the map the character walks on. Now consider the following code:

class MapExporter {

  static exportCurrentMap() {
    var imageInformation = Bitmap.snap(SceneManager._scene)._context.canvas.toDataURL('image/png');

    var splitInformationFromImage = imageInformation.split(',');
    var atobInformation = atob(splitInformationFromImage[1]);
    var atobInformationLength = atobInformation.length;
    var uint8Array = new Uint8Array(atobInformationLength);

    for (var i = 0; i < atobInformationLength; i++) {
      uint8Array[i] = atobInformation.charCodeAt(i);
    }

    var blobData = new Blob([uint8Array], {type: 'image/png'});
    saveAs.saveAs(blobData, 'map.png');
  }
}

This code, when run creates the following image:

The code works, but as you can see we only grab the current visible image from the canvas. Now the way this is all rendered uses Pixi.js, so my question is:

Is there a way to get the WHOLE image WITHOUT scrolling?

Does the canvas api have anything like this? The only other way is to scroll and stitch, but I have no idea how to do that, I can make it scroll but I don't know when to stop, or how to stitch.

So I am hoping there is something that allows me to just get all non visible elements

Answer 1

jsFiddle : https://jsfiddle.net/CanvasCode/q61hb9yf/1

var c = document.getElementById('myCanvas');
var ctx = c.getContext("2d");

var Player = function (xSet, ySet) {
    this.XPos = xSet;
    this.YPos = ySet;
    this.Color = "#0F0";
}

var Background = function (xSet, ySet) {
    this.XPos = xSet;
    this.YPos = ySet;
    this.Sprite = new Image();
    this.Sprite.src = "https://i.sstatic.net/hcFJb.png";
}

var player = new Player(343, 343);
var background = new Background(0, 0);

function moveSomething(e) {
    switch (e.keyCode) {
        case 37:
            if (background.XPos < 0) {
            background.XPos += 48;
            }
            else{
                player.XPos -= 48;
            }
            break;
        case 38:
            if (background.YPos < 0) {
                background.YPos += 48;
            } else {
                player.YPos -= 48;
            }
            break;
        case 39:
            if (Math.abs(background.XPos) < (c.width / 2)) {
                background.XPos -= 48;
            } else {
                player.XPos += 48;
            }
            break;
        case 40:
            if (Math.abs(background.YPos) < (c.height / 2)) {
                background.YPos -= 48;
            } else {
                player.YPos += 48;
            }
            break;
    }
}

window.addEventListener("keydown", moveSomething, false);



setInterval(function () {
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.drawImage(background.Sprite, background.XPos, background.YPos);
    ctx.fillStyle = player.Color;
    ctx.fillRect(player.XPos, player.YPos, 48, 48);
}, 3)

This will draw out the whole image onto the canvas and allow the user to use the arrow keys to move around, there is no collision detection.