Phoenix LiveView hook that replays the canvas binary format on a <canvas>.

CanvasBinaryChart decodes the stream Visualize.Backend.CanvasBinary produces (spec/09 §4) — from the element's data-binary attribute on mount and update, and from canvas_update events pushed by the LiveView — and draws it on a Canvas 2D context.

Usage

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

# Push a new frame
push_event(socket, "canvas_update", %{binary: Visualize.Backend.CanvasBinary.to_base64(bin)})

The decoder (js_decoder/0) is shared with Visualize.Hooks.CanvasIncremental and is written against Visualize.Backend.CanvasBinary.Opcodes: every opcode and every command-stream sub-opcode has a case — the f64 and the f32 path records (D-73) share one reader taking the coordinate width, and the cubic run (D-74) has its own — and an unknown byte throws rather than desynchronise silently. A full-matrix transform (0xFF) composes with ctx.transform.

The canvas's drawing size is the element's data-width × data-height at every draw (spec/10 §8.2, #456): a size change re-sizes the canvas, which clears it, and redraws the current data-binary even when it is the value last drawn.