Develop Reference

Calculate image dimensions on screen size before rendering

Is there a way of calculating / estimating what the image size would be depending on the screen resolution before the image has been rendered? I need more logical help rather than code to be honest. What do I need to calculate?
Image size: 800px * 450px
Window size: 424px * 728px
The image works out to be 424px * 239px. I need to calculate this in code so I can adjust positions of other elements following after (absolute / fixed elements).
What I have done so far is;
var ratio1 = (this.retrievedNewsArticle.featuredImage.width / this.retrievedNewsArticle.featuredImage.height);
var ratio2 = ($(window).innerWidth() / this.retrievedNewsArticle.featuredImage.width);
// Ratio 1 = 424
// Ratio 2 = 0.53
So what's next?

It sounds like you already know the image's size, and it sounds like you want the image to be the full width of the window, and just need to know how to determine the height of the image. If so, the target height is the image height times the windows width divided by the image width:
var renderedWidth = imageWidth;
var renderedHeight = imageHeight * (windowWidth / imageWidth);
That maintains the aspect ratio.
That assumes the image is always wider than the screen. Let's remove that assumption.
If you want the image to stretch to fill:
var renderedWidth, renderedHeight;
if (windowWidth >= imageWidth) {
renderedWidth = imageWidth * (windowWidth / imageWidth);
} else {
renderedWidth = imageWidth;
}
renderedHeight = imageHeight * (windowWidth / renderedWidth);
If you don't want the image to stretch to fill:
var renderedWidth, renderedHeight;
if (windowWidth >= imageWidth) {
renderedWidth = imageWidth;
renderedHeight = imageHeight;
} else {
renderedWidth = imageWidth;
renderedHeight = imageHeight * (windowWidth / imageWidth);
}

How can I obtain screen scaling similar to Slither.io's using Phaser.js?

I am writing a small game in Javascript using the Phaser.js engine as a backend. However, knowing it is possible, the screen scaling issue has proven to be one
of the hardest sides of this.
Slither.io expands to fill the entire screen, and keeps the ratio. I want to use that as my own scaling method as well, but examples seem to be rather sparse.
The ones I have come across have not been all that clear.
These two functions are what I have come up with thus far, but they seem to cause the sprites to match the window scale - not keep a ratio and scale.
function resizeWindow()
{
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.width = window.innerWidth * window.devicePixelRatio;
game.height = window.innerHeight * window.devicePixelRatioz;
gameScale = game.width / game.height;
if (game.height > game.width){
gameScale = (game.height / 300);
} else {
gameScale = (game.width / 480);
}
//game.scale.pageAlignVertically = true;
game.scale.pageAlignHorizontally = true;
game.scale.refresh();
gameScaleManager();
}
function gameScaleManager()
{
for(var i = 0; i < spriteList.length; i++)
{
spriteList[i].scale.setTo(gameScale, gameScale);
}
}

I finally solved it by way of a number of things
First, set your game scale mode to:
game.scale.scaleMode = Phaser.ScaleManager.RESIZE;
and then apply
game.scale.pageAlignVertically = true;
This does matter, especially for full window size.
Instead of relying on jQuery for rescaling, I then set this:
game.scale.setResizeCallback(rescale);
The rescale method handles screen scaling.
Finally, this method takes care of the actual work along with the "RESIZE" scale mode, which WILL affect -how- it works. EXACT_FIT and others tend to force the resolution to be the same as the window, from the experimentation I've done.
function rescale()
{
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
baseWidth = windowWidth * (gameHeight / windowHeight);
baseHeight = gameHeight;
if (windowHeight > windowWidth)
{
systemScale = (windowHeight / baseHeight) / 1.8;
} else {
systemScale = (windowWidth / baseWidth) / 1.8;
}
skyBackgroundGroup.scale.setTo(systemScale * (window.innerWidth - DPR / window.innerWidth - DPR) / 100 * 1, systemScale * 2.1);
MasterControlGroup.scale.setTo(systemScale / 0.98, systemScale / 0.98);
}
The divide by scale of 1.8 and 0.98 are entirely personal preferences.
I almost forgot the biggest part of it - have your camera focus on the center object you are watching.

HTML5 canvas height and width 100% distorts the game animation

I am not sure, how i can be more specific, but i am putting my best effort to explain it.I am trying to understand, what should i be looking for to be more specific, so this is all i have got at this moment.
I was exploring HTML5 JavaScript games, and I noticed, that making the canvas height and width 100% distorts the animation within.
a simple example that i got from here.
If i change the canvas size to 100% (in the example I have provided) it breaks the animation of the game(for example the asteroid).
I would like to know, which property of HTML5 is responsible for this behaviour and what should I be looking for to get the HTML5 animation fit the complete screen size?
EDIT
I tried to run cordova to build the game to native platform,but the 1st problem i am encountering is that the canvas was not fitting the screen size. (that's why i wanted it to completely fit the browser screen, but i see a complete misfit when a canvas made for the browser screen is rendered to the native using cordova).
I explored phaser, about how they are solving this problem, and found this game which is using something called a ScalingManager.
So, my questions are
1. What is scaling a Game?
2. How is the scaling-manager of phaser working
3. without using the scaling manager why will a game not fit the moile screen size even though the canvas height and width are properly mentioned?
4. is there a small experment (without using any phaser or similar javascript game framework) that i can do to understand the need for scaling with simple HTML5 javasctipt and cordova?

A canvas has two distinct sizes:
the size of the element on the page
the size in pixel of the canvas
To avoid distortion and get a pixel-perfect graphic you need to ensure they end up equal... for example:
function redraw() {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
...
}
For single-page HTML games where you just want to draw everything in a canvas a simple approach is:
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
* {
margin: 0;
padding: 0;
border: none;
}
body,html {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<script>
var canvas = document.createElement('canvas');
canvas.style.position = 'absolute';
var body = document.body;
body.insertBefore(canvas, body.firstChild);
var context = canvas.getContext('2d');
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio = context.webkitBackingStorePixelRatio
|| context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio
|| context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1;
var ratio = devicePixelRatio / backingStoreRatio;
redraw();
window.addEventListener('resize', redraw, false);
window.addEventListener('orientationchange', redraw, false);
function redraw() {
width = (window.innerWidth > 0 ? window.innerWidth : screen.width);
height = (window.innerHeight > 0 ? window.innerHeight : screen.height);
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
width *= ratio;
height *= ratio;
if (canvas.width === width && canvas.height === height) {
return;
}
canvas.width = width;
canvas.height = height;
}
//draw things
</script>
</body>
</html>
You will also need to check for changes in innerWidth / innerHeight if your app has parts in which you're just waiting for user interaction (not looping on calling redraw) and the user instead resizes the browser window or tilts the phone/tab.

With Phaser 3, I succeeded by adding window.innerWidthand window.innerHeightto the Scale object into my config :
config: Phaser.Types.Core.GameConfig = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.FIT,
parent: 'phaser-game',
autoCenter: Phaser.Scale.CENTER_BOTH,
width: window.innerWidth,
height: window.innerHeight
},
scene: [MainScene],
parent: 'gameContainer',
physics: {
default: 'arcade',
arcade: {
gravity: {y: 0}
}
}
};
For the moment I don't see any problem, it makes the trick.

How can I proportionally scale down an <img> element with the shorter of its WxH set to a fixed number?

html:
<div id="thumbnail">
<img src="xxx">
</div>
css:
div.thumbnail
{
border: 2px solid #ccc;
width: 50px;
height: 50px;
overflow: hidden;
}
Say the image size is greater than 50x50, is there any way that I can proportionally scale down the image so that the shorter of its width and height would become 50px? Note that the image can be in either portrait or landscape.

First load up the image in javascript to get its real dimensions.
var img = new Image('image.jpg');
var width = img.width;
var height = img.height;
Then determine which one has the larger height, and adjust them accordingly using the ratios.
if (width <= height) {
var ratio = width/height;
var newWidth = 50;
var newHeight = 50 * ratio;
} else {
var ratio = height/width;
var newWidth = 50 * ratio;
var newHeight = 50;
}
Then insert the image into the DOM using jQuery.
$('#imageContainer').append('<img src="' + img.src + '" style="width:' + newWidth + 'px; height:' + newHeight + 'px;" />');

Divide the width of the image by the height, that's your ratio. Then find what's the largest dimension, if it's the width, set the width = 50 * ratio, and height = 50; if it's the height set it height = 50 / ratio and the width = 50. Do you need Javascript code?

You can't constrain an image to a fixed width and height rectangle, while maintaining aspect ratio, in CSS alone. If you need to do this, it will be either a JavaScript or server side solution.
If you set just a width, then the height will be set to maintain the aspect ratio, likewise just a height, but this will not force the image to fit into a box since you can't know which is greatest, the width or the height.
Check out ImageMagick if you'd like something server side, otherwise, consider jQuery for a client side solution. JQuery provides a simple API to let you get the dimensions of any element, which you can then scale programatically. Newer version of ImageMagick also provide simple calls which will allow you to fit an image into a rectangle.

Is there any way to resize the images based on screen resolution with out using javascript?

I am planning to use a big banner image in my website(976X450).Now in higher resolution monitors the image should stretch to occupy the space. Is there any way to do this with out using different images for different resolution?

Just start with the detection of screen dimensions and continue from there:
var width = screen.width;
var height = screen.height;
var img = document.getElementById(image_id);
img.height = img.height * width / img.width;
img.width = width;
Update:
Use CSS:
img#in_question { width: 100% }

#HeaderImage {
height: 20%;
width: 100%;
background-repeat:repeat-x;
}