processing js idea

processing-js-idea.js

function Processing(options) {
  this.options = _.extend({}, options);
}

Processing.prototype.setColor = function(color) {
  this.color = color;
};

Processing.prototype.drawLine = function(x1, y1, x2, y2) {
  // draw a line using this.options.context and this.color
};

/////////////////////////////////////

function Runner() {
  this.contexts = {};
  this.currentContext;
}

Runner.prototype.getContext = function(id) {
  if (!(id in this.contexts)) {
    this.contexts[id] = new Processing({
      context: document.getElementById(id).context
    });
  }
  this.currentContext = this.contexts[id];
};

for (var prop in Processing.prototype) {
  if (typeof Processing.prototype[prop] === 'function') {
    Runner.prototype[prop] = function() {
      return this.currentContext[prop].apply(this.currentContext, arguments);
    };
  }
}

Runner.prototype.globalize = function() {
  for (var prop in this) {
    window[prop] = this[prop];
  }
};

usage.js

// LOW LEVEL
var p = new Processing({context: document.getElementById('my-canvas').context});
p.setColor('blue');
p.drawLine(0, 0, 2, 2);

// RUNNER INSTANCES
var r = new Runner();
var x, y;
r.setup = function() {
  x = 0;
  y = 0;
  this.getContext('my-canvas');
  this.setColor('blue');
  this.getContext('other-canvas');
  this.setColor('red');
};
r.draw = function() {
  x += 1;
  y += 2;
  this.getContext('my-canvas');
  this.drawLine(x, y, x + 1, y + 1);
  this.getContext('other-canvas');
  this.drawLine(x, y, x + 2, y + 2);
};

// ONE RUNNER
// SETUP
(new Runner).globalize();
// USER CODE
var x, y;
function setup() {
  x = 0;
  y = 0;
  getContext('my-canvas');
  setColor('blue');
  getContext('other-canvas');
  setColor('red');
}

function draw() {
  x += 1;
  y += 2;
  getContext('my-canvas');
  drawLine(x, y, x + 1, y + 1);
  getContext('other-canvas');
  drawLine(x, y, x + 2, y + 2);
}