How do I make a scrolling map within an HTML5 canvas?

Question

My project is a 2D tactics game with a square grid. It's all HTML5/Javascript/JQuery.

I have been able to draw out the grid and have a system where I can load different maps with tiles where units can and cannot move. Now I would like to make it so only a portion of the map is displayed in the canvas and the player can scroll around to different characters and stuff (like in normal tactical games).

However I have no idea even where to get started doing this with an HTML5 canvas. I did something similar in Unity but the level of abstraction with the cameras basically did it for me.

Answer 1

You can accomplish this with CanvasRenderingContext2D's methods setTransform, save, and restore. Together they allow you to create a draw transform stack, which permits you to draw all your tiles at their (unchanging) world position, but have them move around on screen.

If you have a position of the left-top world-position of your viewport, you can create a simple camera object:

var camera = {x: xPosition, y: yPosition};

Then you can update only that value and use it to offset your view by setting an initial base-transform. (Pay attention to argument order, as they comprise a 2x2 matrix followed by a 2d translation vector):

context.setTransform(
  1, 0,
  0, 1,
  -1 * camera.x, 
  -1 * camera.y);

Then when you draw individual objects, you can add another transform, draw the image, and then pop that transform back off the stack:

var tile = {pos: {x: xPosition, y:yPosition}, img: tileImage };
context.save();
context.translate(tile.pos.x, tile.pos.y);
context.drawImage(tile.img, 0, 0);
context.restore();

Adding zoom and rotation can be accomplished with the same technique, but they require more terms in the transform. Clamping the motion of the camera, as well as picking items in screenspace, are more complicated. But those would all be separate topics.

Answer 2

If I understand the question correctly, you want a camera that you can move, which is not a standard with vanilla canvas. To emulate this, you should create two variables for the x and y position of the camera. You can then manipulate these values for instance if you want the camera to move when the player moves. To make all your scenes objects act properly with the camera, you should offset all of your draw calls with the x and y of the camera, simply by subtracting the cameras position with the objects position. This can turn messy having to put the offset on everything you draw, so you might want to write some code that you can call to offset all the values automatically.