-
-
Notifications
You must be signed in to change notification settings - Fork 657
Renderer: add bezier and quadratic curve path methods #1350
Description
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 curvequadraticCurveTo(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.