Создание цепочки lib lib

Question

Так что я становлюсь очень ленивым, когда постоянно пишу

ctx.moveTo(x, y); 
ctx.lineTo(x1, y1);
ctx....

для нескольких строк кода холста. Вместо этого я создал цепную оболочку для обработки всего этого, хотя и не так динамично:

function CanvasChainer(ctx) {
  this.ctx = ctx;
}

// just a small snippet
CanvasChainer.prototype = {
  beginPath: function () {
    this.ctx.beginPath();
    return this;
  },
  closePath: function () {
    this.ctx.closePath();
    return this;
  },
  fillText: function (str, x, y) {
    this.ctx.fillText(str, x, y);
    return this;
  },
  moveTo: function (x, y) {
    this.ctx.moveTo(x, y);
    return this;
  }
}

Когда я пытаюсь все прикрепить программно, я продолжаю получать эту ошибку, когда пытаюсь использовать apply или call:

Illegal operation on WrappedNative prototype object
this.ctx[i].apply(this.ctx[i], args); 

и код:

var _canvas = document.createElement('canvas'),
  SLICE = Array.prototype.slice,
  _ctx;

if (_canvas.attachEvent && window.G_vmlCanvasManager) {
  G_vmlCanvasManager.initElement( _canvas );
}

_ctx = _canvas.getContext('2d');

function CanvasChainer(ctx) {
  this.ctx = ctx;
}

CanvasChainer.prototype = { };

for (var p in _ctx) {
  if (!CanvasChainer.prototype[p] && typeof _ctx[p] === 'function') {
    (function (i) {
      CanvasChainer.prototype[i] = function () {
        if (arguments.length > 0) {
          var args = SLICE.call(arguments, 0);
          this.ctx[i].apply(this.ctx[i], args);
        }
        return this;
      }
    }(p))
   }
 }

Эта реализация работает, когда аргументы не нужны (например, ctx.beginPath ()). Я также забочусь только о присоединении доступных функций.

Answer 1

Разве вы не должны вызывать метод в контексте HTMLRenderingContext?

Заменить:

this.ctx[i].apply(this.ctx[i], args); 

на:

this.ctx[i].apply(this.ctx, args); 

Answer 2

лучший код:

for (var p in _ctx) {
  if (!CanvasChainer.prototype[p] && typeof _ctx[p] === 'function') {
      CanvasChainer.prototype[p] = function (p) {
        return function () {
          return this.ctx[p].apply(this.ctx, arguments) || this;
        };
      }(p);
   }
 }