KineticJS- Why does it use so many hidden canvas elements?

Question

I am just starting to learn about the canvas element, however I believe that it is double buffered. Looking through the code for kineticjs It seems that the Kinetic.Stage creates two canvases (not in the DOM) a Kinetic.SceneCanvas and a Kinetic.hitCanvas. When you add a layer to the stage it seems to create 2 more canvases, another Scene and Hit canvas, one of which it displays in the DOM. Why does it need so many overlapping canvases? Or have I misread the code and/or missed the point?

Thanks

Answer 1

Take straight from the KineticJS GitHub Readme :

Kinetic stages are made up of user defined layers. Each layer has two canvas renderers, a scene renderer and a hit graph renderer. The scene renderer is what you can see, and the hit graph renderer is a special hidden canvas that's used for high performance event detection . Each layer can contain shapes, groups of shapes, or groups of other groups. The stage, layers, groups, and shapes are virtual nodes, similar to DOM nodes in an HTML page.

Additionally in the features section, KineticJS features:

High performance event detection via color map hashing