A function for resizing a canvas element to maintain its aspect ratio relative to an image drawn to it.

resizeCanvas.js

// 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);
  }
};