# Resizing the map in HTML5 canvas

Say I have a big map for my HTML5 game. And it is drawn with an image repeatedly. I want my map to be able to resize and respond to player's behaviors.

Now I can resize my map, I just multiply a scale to my maps coordinates (map.x and map.y) and the pattern image will become smaller. However I have two problems that I don't know how to resolve. Let's see what I have got so far.

My Sprite class use paintX and paintY to represent the drawing position. And they are defined as followed:

  get paintX() {
return map.scale * this.x - frame.x;
}

get paintY() {
return map.scale * this.y - frame.y;
}


where frame is the view that follows my player when my player moves. In my game my player stays at the middle of the screen and the screen will move with my player. So when the map resizes the player's position will also change but it will stay in the middle of the screen.

In Frame class its x and y coordinates will change when the scale is updated.

init(config) {
const self = this;
this._x = config.x;
this._y = config.y;
map.on('scale_changed', () => {
self._x = map.scale * self._x;
self._y = map.scale * self._y;
});
}

get x() {
return this._x;
}

set x(val) {
this._x = val;
}

get y() {
return this._y;
}

set y(val) {
this._y = val;
}


The Problems

1 I have thousands of sprites on the map. After resizing the map some sprites still stay in the same location but they are supposed to render at a scaled location. ( I use very large scale change to test so the change is like 0.2 to 0.3 just to see the result more clearly)

2 If I use very small scale change number such as 0.01 I can still see the change but I can also see some hiccups refreshing the map, then it renders OK again, but overtime it becomes messy and presents problem 1.

Without scaling none of these problems exists. I am scratching my head to find a solution for this resizing problem. Is there a standard and not so complicated solution for this map resizing problem?

• Have you tried ctx.scale? (Ctx is the canvas context) – Bálint Jul 19 '16 at 16:15
• @Bálint sure that's how I scale. – newguy Jul 20 '16 at 0:05