Canvas and DOM Renderers

Graphite Grid consists of a state management system and a renderer for visual display. The state management system is initialized through the useGraphiteGrid function, which returns the essential state required to manage the grid. This state must be supplied to a renderer for dynamic content display. Graphite Grid comes with two powerful renderers out of the box:

• GraphiteGridCanvas: Optimized for performance with graphics-intensive applications.
• GraphiteGridDom: Ideal for applications requiring detailed CSS styling and interactions.

Choosing Between Canvas and DOM Renderers

Consider the following factors when deciding between the Canvas and DOM renderers:

• Performance: The DOM renderer is fast and sufficient for most applications. The Canvas renderer provides a smoother experience for scenarios with frequent data updates.
• Interactivity: The DOM renderer leverages the full capabilities of the DOM and browser, making it easier to add event listeners and interact with individual cells. The Canvas renderer offers a more limited range of interactivity options.
• Customization: The DOM renderer supports creating custom elements using React, which is familiar and straightforward for many developers. Customizing the Canvas Grid involves manually drawing on a pixel-based surface, which can be more complex and error-prone.

Visual Differences

The two renderers aim to deliver visually identical outputs as closely as possible. However, due to limitations in the browser's canvas drawing API and inherent differences across browsers, achieving exact consistency might not always be feasible. Visual discrepancies may occur but are typically only noticeable upon close inspection.