Konva Stage Architecture

#atom

Hierarchical Scene Graph Structure for Canvas Management

Core Idea: Konva implements a hierarchical scene graph architecture with Stage, Layer, Group, and Shape objects that organize visual elements and optimize rendering by using multiple canvas elements.

Key Elements

• Stage: The root container that wraps all canvas elements and provides the global coordinate space.

  • Serves as the top-level container for all visual content
  • Connects to an HTML container element
  • Manages dimensions and scaling

• Layers: Each layer corresponds to a separate canvas element in the DOM.

  • Two canvas renderers per layer: visible scene and invisible hit graph
  • Scene renderer handles visual output
  • Hit graph renderer optimizes event detection
  • Independent canvases allow partial redraws for better performance

• Groups: Containers for organizing shapes or other groups.

  • Allow logical organization of related shapes
  • Support collective transformations and styling
  • Enable structured nesting for complex scenes

• Shapes: Leaf nodes representing visual elements.

  • Include built-in types (Rectangle, Circle, Line, Text, etc.)
  • Support for custom shape implementation
  • Individual styling and transformation

• Node Hierarchy Example:

  Stage
          |
    +-----+-----+
    |           |
  Layer       Layer
    |           |
  +---+---+    Shape
  |       |
  Group   Group
  |       |
  +    +--+--+
  |    |     |
  Shape Group Shape
       |
       +
       |
     Shape
  

Implementation Example

// Creating a nested structure of containers and shapes
var stage = new Konva.Stage({
  container: 'container',
  width: 500,
  height: 500
});

// First layer
var layer1 = new Konva.Layer();

// Group within first layer
var group = new Konva.Group({
  x: 100,
  y: 100
});

// Shape within group
var circle = new Konva.Circle({
  x: 0,
  y: 0,
  radius: 50,
  fill: 'red'
});

// Assembly of the hierarchy
group.add(circle);
layer1.add(group);
stage.add(layer1);

// Second layer
var layer2 = new Konva.Layer();
var rect = new Konva.Rect({
  x: 300,
  y: 100,
  width: 100,
  height: 50,
  fill: 'blue'
});

layer2.add(rect);
stage.add(layer2);

// Draw all layers
layer1.draw();
layer2.draw();

Connections

• Related Concepts: Konva.js, Scene Graph, Canvas Rendering, Hit Detection
• Broader Context: Graphics Pipeline Architecture, Rendering Optimization
• Applications: Layered UI Design, Complex Interactive Graphics

References

1. Konva.js architecture documentation: https://konvajs.org/docs/overview.html
2. Multiple canvas approach explanation: https://konvajs.org/docs/performance/Layer_Management.html

#graphics #architecture #scenegraph #rendering #canvas

Connections:

Sources:

• From: Konva Framework Overview Konva - JavaScript Canvas 2d Library