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 '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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.