Canvas Rendering

yFiles for HTML uses SVG as main rendering technique. SVG has many advantages like styling with CSS, crisp text rendering, and support of animations and hover effects. Also, moving or resizing elements can be very fast. For very large diagrams, on the other hand, the SVG DOM gets very large which might result in a loss of performance.

Therefore, yFiles provides alternative rendering methods that render into Canvas (<canvas>) elements using either the Canvas API, the WebGL 1 API, and the WebGL 2 API. Drawing on a Canvas can improve performance for large graphs with not very detailed item visualizations.

The Canvas Rendering API

Styles or renderers which use the Canvas API have to return a subclass of the abstract HtmlCanvasVisual in their implementation of the createVisual method. Implementations of HtmlCanvasVisual have to implement the paint method.

class NodeCanvasVisual extends HtmlCanvasVisual {
  /**
   * @param {IRectangle} layout
   */
  constructor(layout) {
    super()
    this.layout = layout
  }

  /**
   * Draw a simple rectangle with a solid orange fill.
   * @param {IRenderContext} renderContext
   * @param {CanvasRenderingContext2D} ctx
   */
  paint(renderContext, ctx) {
    ctx.fillStyle = 'rgba(255,140,0,1)'
    const l = this.layout
    ctx.fillRect(l.x, l.y, l.width, l.height)
  }
}

The paint method is called upon each repaint. Its ctx parameter is the Canvas context (canvas.getContext("2d")) for the Canvas to paint on.

When should I use Canvas rendering?

Canvas rendering has advantages for the following use cases:

large diagrams
simple rendering

Canvas rendering is best for rendering many elements with a simple visualization. In other words, for large diagrams with few details. This makes it especially suitable for zoom-level dependent rendering (level-of-detail rendering): for low zoom levels, when the number of visible elements is high and a simple visualization is sufficient, the style renderer provides a Canvas-based rendering whereas at higher zoom levels, it uses more sophisticated SVG-based styles (for example with fine details, gradients, drop shadows, etc.).

When should I avoid Canvas rendering?

Canvas rendering will not work at all, or at least might perform badly, in the following use cases:

Wrapping or decorating graph item styles: All style decorators are SVG-based and expect that a decorated style creates a visualisation that consists of an actual SVG element. Although HtmlCanvasVisual extends Visual it doesn’t provide such an element. Thus, decorating styles which provide Canvas rendering will fail.
Mixing SVG-based styles and Canvas-based styles: yFiles for HTML provides a hybrid rendering mechanism. It can render both Canvas-based styles and SVG-based styles at the same time. Internally, HtmlCanvasVisual are drawn on one Canvas if possible. If an SVG style is drawn in between Canvas-based styles (with respect to their z-order) the styles behind the SVG are drawn on one Canvas and the ones before are drawn on another Canvas. Mixing Canvas and SVG-based styles might thus result in generating a large number of Canvas elements which will have a negative impact in memory consumption and performance. Note that nodes, edges, labels and decorations like handles are drawn on separate layers, thus mixing a Canvas-based node style and a built-in label style won’t be a problem, for example.
Complex painting: Since the Canvas has to be completely re-rendered at each repaint, a too complex rendering might reduce the performance compared to SVG-based rendering. Another drawback of Canvas rendering is the handling of native mouse and touch events: the Canvas will either catch all of these events or let them pass through. In the first case, SVG elements won’t get hover effects if a Canvas level is drawn in front. In the latter case, you will get hover effects even for elements which are hidden behind a Canvas node. Note that the mouse and touch events provided by the CanvasComponent are not affected.

HTML Rendering Using Projections