Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Artifact-free screen scaling for a canvas game, limited to 1X, 2X, 4X
// Adapted from Zachary Johnson's Commander Clone 0.2 screen scaling example http://www.zachstronaut.com/projects/commander-clone/0.2/game.html
// Modified to strictly choose 1X or 2X or 4X scaling as appopriate, so we don't end up with screwed up scaling artifacts.
// NOTE: uses jQuery for the DOM load event
$(function () {
fullScreenify();
window.addEventListener('resize', fullScreenify, false);
function fullScreenify() {
var canvas = document.getElementsByTagName('canvas')[0];
var scale = {x: 1, y: 1};
scale.x = (window.innerWidth - 10) / canvas.width;
scale.y = (window.innerHeight - 220) / canvas.height;
if (scale.x >= 4 && scale.y >= 4) {
scale = '4, 4';
} else if (scale.x >= 2 && scale.y >= 2) {
scale = '2, 2';
} else {
scale = '1, 1';
}
canvas.setAttribute('style', '-ms-transform: scale(' + scale + '); -webkit-transform: scale3d(' + scale + ', 1); -moz-transform: scale(' + scale + '); -o-transform: scale(' + scale + '); transform: scale(' + scale + ');');
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.