Simple Modules Management

aSimpleModulesManagement.js

// (function () {

var moduleNames = ['canvas', 'layout']
  , modules = {}

function loadModule() {
  var currentModuleName = moduleNames.shift()
    , scriptElement = document.createElement('script')

  function mod(name) {
    return name in modules
      ? modules[name]
      : null;
  }

  function windowDef(constructor) {
    var module = constructor(mod);
    document.head.removeChild(scriptElement);
    delete window.def;
    if (typeof module !== 'undefined')
      modules[currentModuleName] = module;
    if (moduleNames.length > 0) 
      loadModule();
    else
      document.dispatchEvent(new Event('ModulesLoaded'));
  }

  scriptElement.setAttribute('src', currentModuleName + '.js');
  window.def = windowDef;
  document.head.appendChild(scriptElement);
}

loadModule();

// }) ();

canvas.js

def(function () {
  return document.getElementsByTagName('canvas')[0];
});

layout.js

def(function(mod) {
  var canvas = mod('canvas')
    , cvRatio = 1
    , layout = {}

  function onResize() {
    var docWidth = document.documentElement.clientWidth
      , docHeight = document.documentElement.clientHeight
      , docRatio = docWidth / docHeight
    
    if (cvRatio > docRatio) {
      layout.width = docWidth;
      layout.height = docWidth * cvRatio;
      canvas.style.left = '0px';
      canvas.style.top = (docHeight - layout.height) / 2 + 'px';
    } else {
      layout.width = docHeight / cvRatio;
      layout.height = docHeight;
      canvas.style.left = (docWidth - layout.width) / 2 + 'px';
      canvas.style.top = '0px';
    }

    canvas.style.width = layout.width + 'px';
    canvas.style.height = layout.height + 'px';
  }

  canvas.style.position = 'fixed';
  onResize();

  window.addEventListener('resize', onResize);

  return layout;
});