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.

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

1 Answer 1


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

  • \$\begingroup\$ 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. \$\endgroup\$
    – newguy
    Jan 9, 2017 at 10:59
  • \$\begingroup\$ @newguy if you need a pixi answer, then ask for that. I never used Pixi \$\endgroup\$
    – Bálint
    Jan 9, 2017 at 11:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .