demos/Collage/fabric.js
function (allOnTop) {

      var canvasToDrawOn = this[(allOnTop === true && this.interactive) ? 'contextTop' : 'contextContainer'];

      if (this.contextTop) {
        this.clearContext(this.contextTop);
      }

      if (allOnTop === false || (typeof allOnTop === 'undefined')) {
        this.clearContext(canvasToDrawOn);
      }

      var length = this._objects.length,
          activeGroup = this.getActiveGroup(),
          startTime = new Date();

      if (this.clipTo) {
        canvasToDrawOn.save();
        canvasToDrawOn.beginPath();
        this.clipTo(canvasToDrawOn);
        canvasToDrawOn.clip();
      }

      canvasToDrawOn.fillStyle = this.backgroundColor;
      canvasToDrawOn.fillRect(0, 0, this.width, this.height);

      if (typeof this.backgroundImage == 'object') {
        canvasToDrawOn.save();
        canvasToDrawOn.globalAlpha = this.backgroundImageOpacity;

        if (this.backgroundImageStretch) {
            canvasToDrawOn.drawImage(this.backgroundImage, 0, 0, this.width, this.height);
        }
        else {
            canvasToDrawOn.drawImage(this.backgroundImage, 0, 0);
        }
        canvasToDrawOn.restore();
      }

      if (length) {
        for (var i = 0; i < length; ++i) {
          if (!activeGroup ||
              (activeGroup && this._objects[i] && !activeGroup.contains(this._objects[i]))) {
            this._draw(canvasToDrawOn, this._objects[i]);
          }
        }
      }

      if (this.clipTo) {
        canvasToDrawOn.restore();
      }

      // delegate rendering to group selection (if one exists)
      if (activeGroup) {
        this._draw(this.contextTop, activeGroup);
      }

      if (this.overlayImage) {
        this.contextContainer.drawImage(this.overlayImage, 0, 0);
      }

      if (this.controlsAboveOverlay) {
        this.drawControls(this.contextContainer);
      }

      if (this.onFpsUpdate) {
        var elapsedTime = new Date() - startTime;
        this.onFpsUpdate(~~(1000 / elapsedTime));
      }

      this.fire('after:render');

      return this;
    }
function (allOnTop) {

      var canvasToDrawOn = this[(allOnTop === true && this.interactive) ? 'contextTop' : 'contextContainer'];

      if (this.contextTop) {
        this.clearContext(this.contextTop);
      }

      if (allOnTop === false || (typeof allOnTop === 'undefined')) {
        this.clearContext(canvasToDrawOn);
      }

      var length = this._objects.length,
          activeGroup = this.getActiveGroup(),
          startTime = new Date();

      if (this.clipTo) {
        canvasToDrawOn.save();
        canvasToDrawOn.beginPath();
        this.clipTo(canvasToDrawOn);
        canvasToDrawOn.clip();
      }

      canvasToDrawOn.fillStyle = this.backgroundColor;
      canvasToDrawOn.fillRect(0, 0, this.width, this.height);

      if (typeof this.backgroundImage == 'object') {
        canvasToDrawOn.save();
        canvasToDrawOn.globalAlpha = this.backgroundImageOpacity;

        if (this.backgroundImageStretch) {
            canvasToDrawOn.drawImage(this.backgroundImage, 0, 0, this.width, this.height);
        }
        else {
            canvasToDrawOn.drawImage(this.backgroundImage, 0, 0);
        }
        canvasToDrawOn.restore();
      }

      if (length) {
        for (var i = 0; i < length; ++i) {
          if (!activeGroup ||
              (activeGroup && this._objects[i] && !activeGroup.contains(this._objects[i]))) {
            this._draw(canvasToDrawOn, this._objects[i]);
          }
        }
      }

      if (this.clipTo) {
        canvasToDrawOn.restore();
      }

      // delegate rendering to group selection (if one exists)
      if (activeGroup) {
        this._draw(this.contextTop, activeGroup);
      }

      if (this.overlayImage) {
        this.contextContainer.drawImage(this.overlayImage, 0, 0);
      }

      if (this.controlsAboveOverlay) {
        this.drawControls(this.contextContainer);
      }

      if (this.onFpsUpdate) {
        var elapsedTime = new Date() - startTime;
        this.onFpsUpdate(~~(1000 / elapsedTime));
      }

      this.fire('after:render');

      return this;
    }
function ( allOnTop ) { var canvasToDrawOn = this [ ( allOnTop === true && this . interactive ) ? 'contextTop' : 'contextContainer' ] ; if ( this . contextTop ) { this . clearContext ( this . contextTop ) ; } if ( allOnTop === false || ( typeof allOnTop === 'undefined' ) ) { this . clearContext ( canvasToDrawOn ) ; } var length = this . _objects . length , activeGroup = this . getActiveGroup ( ) , startTime = new Date ( ) ; if ( this . clipTo ) { canvasToDrawOn . save ( ) ; canvasToDrawOn . beginPath ( ) ; this . clipTo ( canvasToDrawOn ) ; canvasToDrawOn . clip ( ) ; } canvasToDrawOn . fillStyle = this . backgroundColor ; canvasToDrawOn . fillRect ( 0 , 0 , this . width , this . height ) ; if ( typeof this . backgroundImage == 'object' ) { canvasToDrawOn . save ( ) ; canvasToDrawOn . globalAlpha = this . backgroundImageOpacity ; if ( this . backgroundImageStretch ) { canvasToDrawOn . drawImage ( this . backgroundImage , 0 , 0 , this . width , this . height ) ; } else { canvasToDrawOn . drawImage ( this . backgroundImage , 0 , 0 ) ; } canvasToDrawOn . restore ( ) ; } if ( length ) { for ( var i = 0 ; i < length ; ++ i ) { if ( ! activeGroup || ( activeGroup && this . _objects [ i ] && ! activeGroup . contains ( this . _objects [ i ] ) ) ) { this . _draw ( canvasToDrawOn , this . _objects [ i ] ) ; } } } if ( this . clipTo ) { canvasToDrawOn . restore ( ) ; } // delegate rendering to group selection (if one exists) if ( activeGroup ) { this . _draw ( this . contextTop , activeGroup ) ; } if ( this . overlayImage ) { this . contextContainer . drawImage ( this . overlayImage , 0 , 0 ) ; } if ( this . controlsAboveOverlay ) { this . drawControls ( this . contextContainer ) ; } if ( this . onFpsUpdate ) { var elapsedTime = new Date ( ) - startTime ; this . onFpsUpdate ( ~ ~ ( 1000 / elapsedTime ) ) ; } this . fire ( 'after:render' ) ; return this ; }
Renders both the top canvas and the secondary container canvas.
@method renderAll
@param allOnTop {Boolean} optional Whether we want to force all images to be rendered on the top canvas
@return {fabric.Canvas} instance
@chainable
Renders both the top canvas and the secondary container canvas .