Skip to content

Instantly share code, notes, and snippets.

@robotnealan
Created October 20, 2016 09:39
Show Gist options
  • Save robotnealan/aa96e1e7b455aba5f3b4d50ca146f705 to your computer and use it in GitHub Desktop.
Save robotnealan/aa96e1e7b455aba5f3b4d50ca146f705 to your computer and use it in GitHub Desktop.
A function for resizing a canvas element to maintain its aspect ratio relative to an image drawn to it.
// resizeCanvas()
//
// Resizes the background canvas element to maintain img proportions
// while centering and stretching canvas to fill fullscreen.
let resizeCanvas = function(img_ratio) {
let window_w = window.innerWidth;
let window_h = window.innerHeight;
let window_ratio = window_w / window_h;
if (img_ratio > window_ratio) {
$('#dataCanvas').css('height', window_h).css('width', 'auto');
let canvas_w = $('#dataCanvas').width();
$('#dataCanvas').css('left', ((canvas_w - window_w)/2) * -1)
.css('top', 'auto');
} else if (img_ratio < window_ratio) {
$('#dataCanvas').css('height', 'auto')
.css('width', window_w);
let canvas_h = $('#dataCanvas').height();
$('#dataCanvas').css('left', 'auto')
.css('top', ((canvas_h - window_h)/2) * -1);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment