How fabric canvas layering works

Markup like this:

<div id="wrapper">
  <canvas id="c"></canvas>
</div>

Becomes (for interactive canvas) markup like this:

<div id="wrapper">
  <div class="canvas-container">
    <canvas class="upper-canvas"></canvas>
    <canvas class="lower-canvas" id="c"></canvas>
  </div>
</div>

The order of various physical and functional "layers" of canvas:

after:render callback     // canvas.on('after:render', function(){ ... })
         ^
canvas overlay image      // canvas.overlayImage/Color
         ^
canvas clipped area       // canvas.clipPath
         ^
canvas object selection   // (only visually represented)
         ^
canvas objects' controls  // (only visually represented; rendered implicitly by drawCorners, drawBorders)
         ^
canvas objects            // canvas.getObjects()
         ^
canvas background image   // canvas.backgroundImage
         ^
canvas background color   // canvas.backgroundColor
         ^
div container             // document.getElementById('wrapper')