Phoenix LiveView hook that replays Canvas 2D commands on a <canvas>.

CanvasChart executes the :json output of Visualize.Backend.Canvas from the element's data-commands attribute, or its :js output from data-script — the two attributes Visualize.Backend.Hybrid emits — on mount, on update, and on canvas_commands events pushed by the LiveView.

Usage

<div id="chart" phx-hook="CanvasChart" phx-update="ignore"
     data-commands={@commands} data-width="800" data-height="600">
  <canvas width="800" height="600"></canvas>
</div>

# Push a new frame
push_event(socket, "canvas_commands", %{commands: Visualize.Render.to_canvas_string(el, format: :json)})

An element carrying data-stream reads its commands in segments instead (spec/10 §7.2, D-203): the data-c of each child of the element beside it that carries data-vis-stream, as Visualize.Render.Segments.json/2 writes them, drawn again when data-drawn names another drawing. Visualize.Components.Chart draws this way.

Every command of the :json output names a Canvas 2D method (set_* commands assign the property), so the hook needs no path helpers (D-37) — but nonScalingLineWidth, the width divided by the scale of the current transform (spec/09 §3.3.3, spec/14 §3.9), and linearGradient and radialGradient, which build a gradient with visualizeGradient from Visualize.Hooks.CanvasBinary.js_decoder/0 (spec/10 §7.2, #652).