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)})

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).