I am making a RTS game in matter.js, similar to starcraft. One thing I want to implement is panning around with viewports.

I created the canvas and the world

const canvas = document.getElementById("canvas");

// create a renderer
var render = Render.create({
    //element: document.body,
    canvas: canvas,
    engine: engine,
    options: {
        width: 650,
        height: 600,
        hasBounds: true,
        wireframes: false, // required for images
        background: 'green'//'transparent'
    }
});

canvas.width = 600;
canvas.height = 600;

Note that I have the canvas dimensions smaller than the world dimensions. This is because the canvas dimensions represents the viewport, and the world dimensions represent the actual game dimensions.

I’m running into an issue when I want to set the viewport though. It seems to be scaling it wrong.

    Render.lookAt(render, [{
        "min": {
            "x": 50,
            "y": 0
        },
        "max": {
            "x": 600,
            "y": 600
        }
    }]);

I’m not sure how LookAt works, but its showing me a much smaller part of the game stretched into the canvas. I am trying to for example show the viewport at x=50, y=0, width=600, height=600. This is basically the viewport moved to the right most.

Does anyone know how to fix it?

Thanks