Hybrid SVG/Canvas backend for optimized rendering.

Renders static elements (axes, labels, grids) as SVG and dynamic data (lines, points, areas) as Canvas commands. This provides the best of both worlds:

• SVG for crisp, accessible static elements (rendered once)
• Canvas for efficient high-frequency data updates

Usage

# Build your chart elements
axis_elements = build_axes(scales)
data_path = Shape.Line.generate_path(line, data)

# Render hybrid output
output = Visualize.Backend.Hybrid.render(
  static: axis_elements,
  dynamic: data_path,
  width: 800,
  height: 600,
  margin: %{top: 20, right: 20, bottom: 30, left: 40}
)

# Returns %{svg: "...", canvas_commands: "...", container: "..."}

In LiveView

<div class="hybrid-chart" style="position: relative;">
  <!-- Static SVG background (render once or on resize) -->
  <%= Phoenix.HTML.raw(@chart.svg) %>

  <!-- Dynamic Canvas overlay (updates frequently) -->
  <div
    id="chart-canvas"
    phx-hook="CanvasChart"
    data-commands={@chart.canvas_commands}
    data-width={@width}
    data-height={@height}
    style="position: absolute; top: 0; left: 0;"
  >
    <canvas width={@width} height={@height}></canvas>
  </div>
</div>