Menu
Hi, I’ve created a script that retrieves the client’s screen width and height, based on which the script sets the canvas size and then repositions it to middle of the screen. Of all the functions, Function init and findInternetExplorer are recognised when using firefox web console however the remainder of the function come as undefined. However, when you call function calculateScreenCenteredPosition(clientScreenWidth, clientScreenHeight, designCanvas) it actually centers the canvas on the screen but using what size, I have no idea. The most recent function worked on is the setCanvasSize(clientScreenWidth, clientScreenHeight) and I have a feeling its something to do with this.
JavaScript:
var designCanvas, canvasContext;
var posNewX, posNewY;
var clientScreenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var clientScreenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
function init() {
designCanvas = document.getElementById(‘myDesign’);
canvasContext = designCanvas.getContext(‘2d’);
if ((designCanvas != null) && (canvasContext != null)) {
setCanvasSize(clientScreenWidth, clientScreenHeight);
}
}
function setCanvasSize(clientScreenWidth, clientScreenHeight) {
if (parseInt(clientScreenWidth, 2) > 1920) {
if ( findInternetExplorer() > 0 || navigator.userAgent.indexOf(‘Edge’) >= 0) {
if (parseInt(clientScreenWidth, 2) > 2400) {
} /* closing of greater > 2400 */
/* 22 & 21.5 Inch on Ms Edge and IE11 */
else if (parseInt(clientScreenWidth, 2) == 2400 && (parseInt(clientScreenHeight, 2) == 1204 || parseInt(clientScreenHeight, 2) > 1204) || parseInt(clientScreenWidth, 2) == 2259 && (parseInt(clientScreenHeight, 2) >= 1333 && parseInt(clientScreenHeight, 2) <= 1271 || parseInt(clientScreenHeight, 2) > 1271) || parseInt(clientScreenWidth, 2) == 1976 && (parseInt(clientScreenHeight, 2) >= 1098 && parseInt(clientScreenHeight, 2) <= 1124 || parseInt(clientScreenHeight, 2) > 1124)) {
if (parseInt(clientScreenWidth, 2) == 2400 && (parseInt(clientScreenHeight, 2) == 1204 || parseInt(clientScreenHeight, 2) > 1204)) {
if (parseInt(clientScreenWidth, 2) == 2400 && parseInt(clientScreenHeight, 2) == 1204) {
} else {
}
} else if (parseInt(clientScreenWidth, 2) == 2259 && (parseInt(clientScreenHeight, 2) >= 1333 && parseInt(clientScreenHeight, 2) <= 1271 || parseInt(clientScreenHeight, 2) > 1271)) {
if (parseInt(clientScreenWidth, 2) == 2259 && (parseInt(clientScreenHeight, 2) >= 1333 && parseInt(clientScreenHeight, 2) <= 1271)) {
} else {
}
} else {
}
}
} /* closing of IE 11 and Edge If Cause */
} /* clientScreenWidth > 1920
else if (parseInt(clientScreenWidth, 2) == 1920 && ((parseInt(clientScreenHeight, 2) >= 935 && parseInt(clientScreenHeight, 2) <= 985) || parseInt(clientScreenHeight, 2) > 985) || parseInt(clientScreenWidth, 2) == 1680 && ((parseInt(clientScreenHeight, 2) >= 916 && parseInt(clientScreenHeight, 2) <= 949) || parseInt(clientScreenHeight, 2) > 949)) {
if (parseInt(clientScreenWidth, 2) == 1920 && ((parseInt(clientScreenHeight, 2) >= 935 && parseInt(clientScreenHeight, 2) <= 985) || parseInt(clientScreenHeight, 2) > 985)) {
if (parseInt(clientScreenWidth, 2) == 1920 && (parseInt(clientScreenHeight, 2) >= 935 && parseInt(clientScreenHeight, 2) <= 985)) {
designCanvas.width = 1175;
designCanvas.height = 825;
calculateScreenCenter(clientScreenWidth, clientScreenHeight, designCanvas);
} else {
designCanvas.width = 1175;
designCanvas.height = 920;
calculateScreenCenter(clientScreenWidth, clientScreenHeight, designCanvas);
}
} else {
if (parseInt(clientScreenWidth, 2) == 1680 && (parseInt(clientScreenHeight, 2) >= 916 && parseInt(clientScreenHeight, 2) <= 949)) {
designCanvas.width = 1075;
designCanvas.height = 725;
calculateScreenCenter(clientScreenWidth, clientScreenHeight, designCanvas);
} else {
}
}
}
} /* closing brace of function
function calculateScreenCenter(clientScreenWidth, clientScreenHeight, designCanvas) {
var canvasWidth = parseInt(designCanvas.width, 2);
var canvasHeight = parseInt(designCanvas.height, 2);
var availableScreenWidth = parseInt(clientScreenWidth, 2);
var availableScreenHeight = parseInt(clientScreenHeight, 2);
if (((typeof clientScreenWidth === ‘string’) && (typeof clientScreenHeight === ‘string’)) | (typeof clientScreenWidth === ‘string’) | (typeof clientScreenHeight === ‘string’)) {
if (((typeof designCanvas.width === ‘string’) && (typeof designCanvas.height === ‘string’)) | (typeof designCanvas.width === ‘string’) | (typeof designCanvas.height === ‘string’)) {
posNewX = ((availableScreenWidth – canvasWidth) / 2) + ‘px’;
posNewY = ((availableScreenHeight – canvasHeight) / 2) + ‘px’;
repositionCanvas(posNewX, posNewY);
} else {
posNewX = ((availableScreenWidth – designCanvas.width) / 2) + ‘px’;
posNewY = ((availableScreenHeight – designCanvas.height) / 2) + ‘px’;
repositionCanvas(posNewX, posNewY);
}
} else {
posNewX = ((clientScreenWidth – designCanvas.width) / 2) + ‘px’;
posNewY = ((clientScreenHeight – designCanvas.height) / 2) + ‘px’;
repositionCanvas(posNewX, posNewY);
}
}
function repositionCanvas(posNewX, posNewY) {
designCanvas.style.marginLeft = posNewX;
designCanvas.style.marginTop = posNewY;
}
function findInternetExplorer() {
var ua = window.navigator.userAgent;
var Ind = ua.indexOf(“MSIE”);
if (Ind > 0) {
return parseInt(ua.substring(Ind + 5, ud.indexOf(“.”, Ind)));
} else if (!!navigator.userAgent.match(/Trident/7.
return 11;
} else {
return 0;
}
}
window.onload = init;
HTML:
<canvas id=’myDesign’ width=’900′ height=’625′ style=’border:1px solid #D0D0D0;’> </canvas>
any ideas/ solutions would be much appreciated as would any ideas on how to compact or shorten the script and also to detect IE 11 without the use of function findInternetExplorer even though it works perfectly
Many Thanks