Knowing What the Player Is Doing - Building JavaScript Games for Phones, Tablets, and Desktop - page 59

Figure 5-3. The mouse pointer is at the bottom of the background sprite, but the mouse y-position is 340 (instead of 480)
because clientY doesn't take scrolling into account
Changing the Origin of a Sprite
When you run the Balloon1 example, notice that the balloon is drawn such that the top-left corner of
the sprite is at the current mouse position. When you draw a sprite at a certain position, the default
behavior is that the top-left corner of the sprite is drawn at that position. If you execute the following
instruction
Game.drawImage(someSprite, somePosition);
the sprite named someSprite is drawn on the screen such that its top-left corner is at position
somePosition . You can also call the top-left corner of the sprite its origin . So, what if you want to
change this origin? For example, suppose you would like to draw the center of the sprite someSprite
at position somePosition . Well, you can calculate that by using the width and height variables of the
Image type. Let's declare a variable called origin and store the center of the sprite in it:
var origin = { x : someSprite.width / 2, y : someSprite.height / 2 };
Now, if you want to draw the sprite someSprite with this different origin, you can do so as follows:
var pos = { x : somePosition.x - origin.x,
y : somePosition.y - origin.y };
Game.drawImage(someSprite, pos);