Forums » Help » Canvas: Scale width and height individually?

Hi all, yeah the headline pretty much gets it. I build my games with an iPad resolution and the integration with Ejecta/Xcode works pretty well. Now I want to scale my game at least to the iPhone 3GS/4/4S resolution without black bars, but the scale in impact only takes one value (and not x and y separately).

I've tried adjusting the functions in system.js, image.js, etc. but only got my game not loading anymore. Anyone out there that has a solution/plugin/howto/whatever to get over this? Maybe something directly in Ejecta, which I wasn't able to find (only found the 'fit-width' / 'fit-height' parameters)?

Scaling x and y individually isn't such a good idea, in my opinion. Resizing the viewport (i.e. your "window" into the game world) to the correct dimensions usually gives much better results. I wrote a bit about this here.

If you really want to scale x and y individually in the browser, you can still do this via CSS:

canvas.style.width = '123px';
canvas.style.width = '234px';

Thanks for your reply Dominic!

Yeah, I know it is probably not the best way to go, but as the ratio from iPhones < iPhone 5 doesn't differ that much from that of an iPad (1,5:1,33) it would still look acceptable and doesn't have black bars. (Saw it in some projects of a friend of mine, unfortunately not done with Impact/Ejecta)

For the iPhone 5 I would go with the same size as iPhone 4 and below.

If I do the scaling with CSS, how would it affect clickable entities like buttons? I check if the mouse is over the entity like this:

inFocus: function() {
    return (
        (ig.input.mouse.x >= this.pos.x) &&
        (ig.input.mouse.x <= this.pos.x + this.size.x) &&
        (ig.input.mouse.y >= this.pos.y) &&
        (ig.input.mouse.y <= this.pos.y + this.size.y)
    );
}

Sorry for asking, but I will not be able to test it myself before tomorrow evening and I am just curious about this question ;)