Skip to content

Added optional margins for canvas element #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
seahyx wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added optional margins for canvas element #7

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 68 additions & 67 deletions scaleToWindow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}