// 将canvas上下文引用对象安全地封装在一个命令对象的内部，如果他人想调用可以直接通过命令对象调用一条命令，而不需要直接引用canvas上下文对象
var CanvasCommand = (function(){
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var Action = {
    fillStyle: function(c) { // 填充色彩
      ctx.fillStyle = c;
    },
    fillRect: function(x, y, w, h) { // 填充矩形
      ctx.fillRect(x, y, w, h);
    },
    strokeRect: function(x, y, w, h) { // 描边矩形
      ctx.strokeRect(x, y, w, h);
    },
    // 每个方法里面可以做一些兼容性的处理。
    // 也可以根据业务需求，实现canvas 原API没有的的方法
    // ...
  }

  return {
    execute: function exec(msg) {
      if (!msg) {
        return;
      }
      
      if (msg.length) {
        for (var i = 0, len = msg.length; i < len; i++) {
          exec(msg[i])
        }
      } else {
        msg.param = Object.prototype.toString.call(msg.param) === "[object Array]" ? msg.param : [msg.param];
        Action[msg.command].apply(Action, msg.param)
      }
    }
  }
})();

CanvasCommand.execute([
  { command: 'fillStyle', param: 'red'},
  { command: 'fillRect', param: [20, 20, 100, 101]},
  { command: 'strokeRect', param: [120, 20, 100, 101]},
])