fabric.Canvas

fabric.StaticCanvas = fabric.util.createClass(fabric.CommonMethods, fabric.Collection, {
    initialize: function ...,
    backgroundColor: '',
    ...
}
fabric.CommonMethods = {
    _setOptions: function ...,
    ...
}
fabric.Collection = {
    _objects: [],
    add: function ...
    ...
}

// 省略了些
fabric.util.createClass = function() {
    function klass() {
      this.initialize.apply(this, arguments);
    }
    const properties = slice.call(arguments, 0);
    for (var i = 0, length = properties.length; i < length; i++) {
      addMethods(klass, properties[i], parent);
    }
    return klass
}

fabric.StaticCanvas = function() {
    // 生成实例会执行
    this.initialize.apply(this, arguments);
}
fabric.StaticCanvas.prototype.initialize = function() {...}
fabric.StaticCanvas.prototype._setOptions = function() {...}
fabric.StaticCanvas.prototype.add = function() {...}
fabric.StaticCanvas.prototype._objects = []

initialize: function(el, options) {
    options || (options = { });
    this.renderAndResetBound = this.renderAndReset.bind(this);
    this.requestRenderAllBound = this.requestRenderAll.bind(this);
    this._initStatic(el, options); // 这个只生成loverCanvas，并设置背景
},

renderCanvas: function(ctx, objects) {
    var v = this.viewportTransform, path = this.clipPath;
    this.cancelRequestedRender(); // 消除动画
    // 计算canvas边界， 可以调用canvas.calcViewportBoundaries() 返回
    // this.vptCoords = {
    //    tl: min,
    //    tr: new Point(max.x, min.y),
    //    bl: new Point(min.x, max.y),
    //    br: max,
    //  };
    this.calcViewportBoundaries(); 
    this.clearContext(ctx);
    ...
}

initialize: function(el, options) {
    options || (options = { });
    this.renderAndResetBound = this.renderAndReset.bind(this);
    this.requestRenderAllBound = this.requestRenderAll.bind(this);
    this._initStatic(el, options);

    this._initInteractive(); // 多了这个
    this._createCacheCanvas(); // 多了这个, 缓存canvas
},

    this.wrapperEl = <div class="canvas-container'>
        <canvas class="upper-canvas"></canvas>
        <canvas class="lower-canvas"></canvas>
    </div>
    this.contextContainer = lowerCanvasEl.getContext('2d');
    this.contextTop =  upperCanvasEl.getContext('2d');

this.cacheCanvasEl = this._createCanvasElement();
this.contextCache = this.cacheCanvasEl.getContext('2d');