Skip to content

Renderer: add bezier and quadratic curve path methods #1350

@obiot

Description

@obiot

Summary

Add bezierCurveTo() and quadraticCurveTo() path methods to the renderer API, matching the Canvas 2D API.

Requirements

  • bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) — cubic bezier curve
  • quadraticCurveTo(cpx, cpy, x, y) — quadratic bezier curve
  • Both should work within beginPath() / closePath() / stroke() / fill() flow
  • Available on both Canvas and WebGL renderers

Use Cases

  • Particle trails and swoosh effects
  • Path-based movement visualization
  • UI bezier animations and transitions
  • Custom shape drawing (speech bubbles, organic shapes)

Approach

Canvas renderer: Direct pass-through to ctx.bezierCurveTo() / ctx.quadraticCurveTo().

WebGL renderer: Tessellate the curve into line segments using De Casteljau's algorithm, then feed the resulting points into the existing primitive batcher. A configurable segment count (or adaptive based on curve length) controls quality vs. performance. The _drawPoints array already used by lineTo() can accumulate the tessellated points.

Refactor: Extract #generateTriangleFan from webgl_renderer.js into a new tessellation.js utility module. This module would centralize all geometry tessellation helpers (triangle fans, bezier/quadratic curve subdivision, etc.) for reuse across the renderer and future features.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions