Visualize.Backend.Canvas (Visualize v0.2.35)

Copy Markdown View Source

Canvas 2D API rendering backend.

Generates JavaScript code that draws to a Canvas 2D context. Can output either raw JS commands, JSON structure for client-side rendering, or a list of command tuples.

Output Formats

  • :js - JavaScript code string (default)
  • :json - JSON array of command objects
  • :commands - Elixir list of command tuples
  • :binary - Compact binary format (requires Nx, ~80% smaller than JSON)
  • :binary_base64 - Binary format encoded as base64 string

Every path command is executable in every format: relative and single-axis commands are resolved on the server, smooth curves are expanded, and arcs become ellipse calls (Visualize.IR.Path.absolute/1, Visualize.Backend.Canvas.Arc; D-37).

Examples

element = IR.Element.path(path, %{stroke: "blue", fill: :none})

# JavaScript output
Visualize.Render.to_canvas_string(element, format: :js)
# => "ctx.beginPath();\nctx.moveTo(0, 0);\n..."

# JSON output
Visualize.Render.to_canvas_string(element, format: :json)
# => "[{\"cmd\":\"beginPath\",\"args\":[]}...]"

Summary

Types

output_format()

@type output_format() :: :js | :json | :commands | :binary | :binary_base64