example-code.js

var container = {
  context: [],
  canvas: [],
  gameArea: null,

  width: 0,
  height: 0,
  unitSize: 0,

  init: function () {
    for (var i = 0; i < 4; i++) {
      this.canvas[i] = document.getElementById('canvas' + (i + 1));
      this.context[i] = this.canvas[i].getContext('2d');
    }

    this.gameArea = document.getElementById('gameArea');

    this.resize();

    this.unitSize = Math.round(document.getElementById('getDpi').offsetHeight / 10) * 10;

    if (this.unitSize > this.height / 3) {
      this.unitSize = Math.floor(this.height / 30) * 10;
    }
  },

  resize: function () {
    var container = document.getElementById('container')

    var newWidth = document.container.offsetWidth;
    var newHeight = document.container.offsetHeight;

    if (container.style.width  ==  '100%') {
      newWidth = window.innerWidth;
      newHeight = window.innerHeight;
    }

    this.gameArea.style.width = Math.round(newWidth) + 'px';
    this.gameArea.style.height = Math.round(newHeight) + 'px';

    for (var i = 0; i < this.canvas.length; i++) {
      this.canvas[i].width = Math.round(newWidth);
      this.canvas[i].height = Math.round(newHeight);
    }

    this.width = Math.round(newWidth);
    this.height = Math.round(newHeight);
  }
};

var defaultValues = {
  width: 0,
  height: 0,
  left: 0,
  top: 0
}

var controls = {
  helm: defaultValues,
  accelerator: defaultValues
  transmission: defaultValues
  tachometer: defaultValues
  helper: function(objFrom, objTo) {
    objTo.width = objFrom.unitSize;
    objTo.height = objFrom.unitSize;
    objTo.left = objFrom.width - objFrom.unitSize;
    return objTo
  }

  init: function () {
    this.helm.width = container.unitSize;
    this.helm.height = container.unitSize;
    this.helm.left = 0;
    this.helm.top = container.height - container.unitSize;

    this.accelerator = this.helper(container, this.accelerator);
    this.accelerator.top = container.height - container.unitSize;

    this.transmission = this.helper(container, this.transmission);
    this.transmission.top = container.height - container.unitSize * 2;

    this.tachometer = this.helper(container, this.tachometer);
    this.tachometer.top = 0;
  }
};

var carContainer = {
  width: 0,
  height: 0,
  left: 0,
  top: 0,

  init: function () {
    var size = Math.min(container.width - container.unitSize * 2, container.height) - container.unitSize;

    this.width = size;
    this.height = size;

    this.left = (container.width - size) / 2;
    this.top = (container.height - size) / 2;
  }
};

var carObject = {

};

var location = {

};

function init() {
  container.init();

  controls.init();

  car.init();
}