From cf2e7425c1b63f626359d0ab89012c27db8f1c56 Mon Sep 17 00:00:00 2001 From: Seah Ying Xiang Date: Sat, 8 Dec 2018 14:57:43 +0800 Subject: [PATCH] Added optional margins for canvas element Additions: - Optional margin parameters for canvas element that does not scale with canvas. Has default HTML margin behaviour. Changes: - Removed repeat of code for getting the final scale of the element and determination of which axis the canvas is to be centered. --- scaleToWindow.js | 135 ++++++++++++++++++++++++----------------------- 1 file changed, 68 insertions(+), 67 deletions(-) diff --git a/scaleToWindow.js b/scaleToWindow.js index 2b4cc89..d80bab9 100644 --- a/scaleToWindow.js +++ b/scaleToWindow.js @@ -1,77 +1,78 @@ -function scaleToWindow(canvas, backgroundColor) { - var scaleX, scaleY, scale, center; +function scaleToWindow(canvas, + margin_top = 0, margin_right = 0, margin_bottom = false, margin_left = false, + backgroundColor) { + //Margins have similar behaviour as HTML margins, does not scale with canvas - //1. Scale the canvas to the correct size - //Figure out the scale amount on each axis - scaleX = window.innerWidth / canvas.offsetWidth; - scaleY = window.innerHeight / canvas.offsetHeight; + var scaleX, scaleY, scale, center; - //Scale the canvas based on whichever value is less: `scaleX` or `scaleY` - scale = Math.min(scaleX, scaleY); - canvas.style.transformOrigin = "0 0"; - canvas.style.transform = "scale(" + scale + ")"; + //HTML margin behaviour + if (margin_bottom === false) margin_bottom = margin_top !== 0 ? margin_top : 0; + if (margin_left === false) margin_left = margin_right !== 0 ? margin_right : 0; - //2. Center the canvas. - //Decide whether to center the canvas vertically or horizontally. - //Wide canvases should be centered vertically, and - //square or tall canvases should be centered horizontally - if (canvas.offsetWidth > canvas.offsetHeight) { - if (canvas.offsetWidth * scale < window.innerWidth) { - center = "horizontally"; - } else { - center = "vertically"; - } - } else { - if (canvas.offsetHeight * scale < window.innerHeight) { - center = "vertically"; - } else { - center = "horizontally"; - } - } + //1. Scale the canvas to the correct size + //Figure out the scale amount on each axis with margins accounted for + scaleX = (window.innerWidth - margin_left - margin_right) / canvas.offsetWidth; + scaleY = (window.innerHeight - margin_top - margin_bottom) / canvas.offsetHeight; - //Center horizontally (for square or tall canvases) - var margin; - if (center === "horizontally") { - margin = (window.innerWidth - canvas.offsetWidth * scale) / 2; - canvas.style.marginTop = 0 + "px"; - canvas.style.marginBottom = 0 + "px"; - canvas.style.marginLeft = margin + "px"; - canvas.style.marginRight = margin + "px"; - } + //Scale the canvas based on whichever value is less: `scaleX` or `scaleY` and + //2. Center the canvas. + //Decide whether to center the canvas vertically or horizontally. + //Wide canvases should be centered vertically, and + //square or tall canvases should be centered horizontally + if (scaleX < scaleY) { + scale = scaleX; + center = "vertically"; + } else { + scale = scaleY; + center = "horizontally"; + } + //Set the scale of the canvas + canvas.style.transformOrigin = "0 0"; + canvas.style.transform = "scale(" + scale + ")"; - //Center vertically (for wide canvases) - if (center === "vertically") { - margin = (window.innerHeight - canvas.offsetHeight * scale) / 2; - canvas.style.marginTop = margin + "px"; - canvas.style.marginBottom = margin + "px"; - canvas.style.marginLeft = 0 + "px"; - canvas.style.marginRight = 0 + "px"; - } + //Center horizontally (for square or tall canvases) + var margin; + if (center === "horizontally") { + margin = ((window.innerWidth - margin_left - margin_right) - canvas.offsetWidth * scale) / 2; + canvas.style.marginTop = margin_top + "px"; + canvas.style.marginBottom = margin_bottom + "px"; + canvas.style.marginLeft = (margin_left + margin) + "px"; + canvas.style.marginRight = (margin_right + margin) + "px"; + } - //3. Remove any padding from the canvas and body and set the canvas - //display style to "block" - canvas.style.paddingLeft = 0 + "px"; - canvas.style.paddingRight = 0 + "px"; - canvas.style.paddingTop = 0 + "px"; - canvas.style.paddingBottom = 0 + "px"; - canvas.style.display = "block"; + //Center vertically (for wide canvases) + if (center === "vertically") { + margin = ((window.innerHeight - margin_top - margin_bottom) - canvas.offsetHeight * scale) / 2; + canvas.style.marginTop = (margin_top + margin) + "px"; + canvas.style.marginBottom = (margin_bottom + margin) + "px"; + canvas.style.marginLeft = margin_left + "px"; + canvas.style.marginRight = margin_right + "px"; + } - //4. Set the color of the HTML body background - document.body.style.backgroundColor = backgroundColor; + //3. Remove any padding from the canvas and body and set the canvas + //display style to "block" + canvas.style.paddingLeft = 0 + "px"; + canvas.style.paddingRight = 0 + "px"; + canvas.style.paddingTop = 0 + "px"; + canvas.style.paddingBottom = 0 + "px"; + canvas.style.display = "block"; - //Fix some quirkiness in scaling for Safari - var ua = navigator.userAgent.toLowerCase(); - if (ua.indexOf("safari") != -1) { - if (ua.indexOf("chrome") > -1) { - // Chrome - } else { - // Safari - //canvas.style.maxHeight = "100%"; - //canvas.style.minHeight = "100%"; - } - } + //4. Set the color of the HTML body background + document.body.style.backgroundColor = backgroundColor; - //5. Return the `scale` value. This is important, because you'll nee this value - //for correct hit testing between the pointer and sprites - return scale; + //Fix some quirkiness in scaling for Safari + var ua = navigator.userAgent.toLowerCase(); + if (ua.indexOf("safari") != -1) { + if (ua.indexOf("chrome") > -1) { + // Chrome + } else { + // Safari + //canvas.style.maxHeight = "100%"; + //canvas.style.minHeight = "100%"; + } + } + + //5. Return the `scale` value. This is important, because you'll nee this value + //for correct hit testing between the pointer and sprites + return scale; } \ No newline at end of file