# How can I scale/zoom to a point in canvas in the game?

I am using html5 canvas to build a MMO game. When I scale my background by default it scales to (0, 0) which is the top left corner of the background. If I have other sprites on the screen they all will look like they are shifting to the bottom right a little bit. Suppose my sprite(player) is at (x,y) of the map and it is placed center on the canvas.How can I make the background scale or zoom to (x,y) instead of (0,0)? Its world position is (x,y) but its screen position is always (canvas.width / 2, canvas.height / 2). I think in this way the sprites around my player wouldn't shift their position to unexpected places. But I don't know how to do this.

• Don't start with an MMO game, especially if you use a technology like 2d canvas – Bálint Jan 9 '17 at 9:57

You first need to save the context (to be able to set it back later) then translate (x; y) to be in (0; 0)

ctx.translate(x, y);


Then you zoom in:

ctx.scale(2; 2);


The canvas' width and height then becomes half as much, so to put (x; y) in the center, we need to translate back by (width / zoom; height / zoom)

ctx.translate(-c.width / 4, -c.height / 4);


You should store the zoom levek in a variable and increase it when you want to zoom in

• Thanks. Do you know how to do that in Pixi? Someone said just need to add a container and move the container's position to (x,y) but I'm unable to make that work. – newguy Jan 9 '17 at 10:59
• @newguy if you need a pixi answer, then ask for that. I never used Pixi – Bálint Jan 9 '17 at 11:01