Merge pull request #1354 from melonjs/feature/bezier-curves

Add bezier/quadratic curve support, fix Path2D bugs, extract utilities

Author: obiot

packages/examples/src/examples/graphics/ExampleGraphics.tsx

@@ -1,8 +1,8 @@
 import {
+	Application,
 	type CanvasRenderer,
 	Color,
 	Ellipse,
-	game,
 	Matrix2d,
 	Polygon,
 	Renderable,
@@ -14,18 +14,10 @@ import {
 import { createExampleComponent } from "../utils";
 
 const createGame = () => {
-	// Initialize the video.
-	if (
-		!video.init(1024, 768, {
-			parent: "screen",
-			renderer: video.AUTO,
-			preferWebGL1: false,
-			blendMode: "normal",
-		})
-	) {
-		alert("Your browser does not support HTML5 canvas.");
-		return;
-	}
+	const _app = new Application(1024, 768, {
+		parent: "screen",
+		renderer: video.AUTO,
+	});
 
 	class Graphics extends Renderable {
 		starMask: Polygon;
@@ -34,6 +26,8 @@ const createGame = () => {
 		stripe1: Polygon;
 		stripe2: Polygon;
 		stripe3: Polygon;
+		stripe4: Polygon;
+		stripe5: Polygon;
 		roundRect1: RoundRect;
 		roundRect2: RoundRect;
 		rrect1Tween: Tween;
@@ -45,7 +39,7 @@ const createGame = () => {
 		transformMatrix: Matrix2d;
 		// constructor
 		constructor() {
-			super(0, 0, game.viewport.width, game.viewport.height);
+			super(0, 0, 1024, 768);
 
 			this.starMask = new Polygon(300, 70, [
 				// draw a star
@@ -73,28 +67,42 @@ const createGame = () => {
 			this.starMask.scale(4.0);
 			this.polymask.scale(4.0);
 
-			this.circleMask = new Ellipse(630 + 50, 520 + 50, 200, 200);
+			this.circleMask = new Ellipse(630 + 50, 560 + 50, 200, 200);
 
+			// Commodore rainbow stripes
+			const bw = 20;
 			this.stripe1 = new Polygon(0, 0, [
-				{ x: 0, y: 40 },
+				{ x: 0, y: bw },
 				{ x: 0, y: 0 },
-				{ x: 40, y: 0 },
+				{ x: bw, y: 0 },
 			]);
 			this.stripe2 = new Polygon(0, 0, [
-				{ x: 0, y: 40 },
-				{ x: 40, y: 0 },
-				{ x: 60, y: 0 },
-				{ x: 0, y: 60 },
+				{ x: 0, y: bw },
+				{ x: bw, y: 0 },
+				{ x: bw * 2, y: 0 },
+				{ x: 0, y: bw * 2 },
 			]);
 			this.stripe3 = new Polygon(0, 0, [
-				{ x: 0, y: 60 },
-				{ x: 60, y: 0 },
-				{ x: 80, y: 0 },
-				{ x: 0, y: 80 },
+				{ x: 0, y: bw * 2 },
+				{ x: bw * 2, y: 0 },
+				{ x: bw * 3, y: 0 },
+				{ x: 0, y: bw * 3 },
+			]);
+			this.stripe4 = new Polygon(0, 0, [
+				{ x: 0, y: bw * 3 },
+				{ x: bw * 3, y: 0 },
+				{ x: bw * 4, y: 0 },
+				{ x: 0, y: bw * 4 },
+			]);
+			this.stripe5 = new Polygon(0, 0, [
+				{ x: 0, y: bw * 4 },
+				{ x: bw * 4, y: 0 },
+				{ x: bw * 5, y: 0 },
+				{ x: 0, y: bw * 5 },
 			]);
 
-			this.roundRect1 = new RoundRect(100, 470, 400, 180, 4);
-			this.roundRect2 = new RoundRect(105, 475, 390, 170, 4);
+			this.roundRect1 = new RoundRect(100, 530, 400, 180, 4);
+			this.roundRect2 = new RoundRect(105, 535, 390, 170, 4);
 
 			this.rrect1Tween = new Tween(this.roundRect1).to(
 				{ radius: 100 },
@@ -118,21 +126,26 @@ const createGame = () => {
 			);
 
 			// rotating + transformed ellipse
-			this.filledEllipse = new Ellipse(860, 410, 200, 100);
+			this.filledEllipse = new Ellipse(860, 460, 200, 100);
 			this.transformMatrix = new Matrix2d();
 			this.ellipseTime = 0;
 			this.arcAngle = 0;
 
 			// a temporary color object
 			this.color = new Color();
 
+			// pre-allocate dash patterns to avoid per-frame array creation
+			this.dashZigzag = [10, 6];
+			this.dashCurve = [8, 4];
+			this.noDash = [] as number[];
+
 			this.anchorPoint.set(0, 0);
 		}
 
 		override update(dt: number) {
 			this.ellipseTime += dt;
 			// reset and apply rotation + oscillating scale transform
-			this.filledEllipse.setShape(860, 410, 200, 100);
+			this.filledEllipse.setShape(860, 460, 200, 100);
 			this.filledEllipse.rotate(this.ellipseTime / 1000);
 			this.transformMatrix.identity();
 			this.transformMatrix.scale(
@@ -152,16 +165,17 @@ const createGame = () => {
 
 			renderer.lineWidth = 3;
 
-			// draw 3 stripes
-			this.color.parseHex("#55aa00");
-			renderer.setColor(this.color);
+			// draw Commodore rainbow stripes (red, orange, yellow, green, blue)
+			renderer.setColor("#e02020");
 			renderer.fill(this.stripe1);
-			renderer.setColor("#ffcc00");
-			// lerp from the the starting color and the current renderer one
-			renderer.setColor(this.color.lerp(renderer.getColor(), 0.5));
+			renderer.setColor("#e07020");
 			renderer.fill(this.stripe2);
-			renderer.setColor("#ffcc00");
+			renderer.setColor("#e0c020");
 			renderer.fill(this.stripe3);
+			renderer.setColor("#40a040");
+			renderer.fill(this.stripe4);
+			renderer.setColor("#40a0e0");
+			renderer.fill(this.stripe5);
 
 			renderer.setColor("#ffcc00");
 			renderer.setGlobalAlpha(0.375);
@@ -170,19 +184,29 @@ const createGame = () => {
 			renderer.fill(this.polymask.getBounds());
 			renderer.clearMask();
 
+			// star bounding box with solid color
 			renderer.setColor("#55aa00");
-			renderer.fill(this.starMask);
 			renderer.setGlobalAlpha(0.5);
-			renderer.stroke(this.starMask);
 			renderer.fill(this.starMask.getBounds());
 			renderer.setGlobalAlpha(1.0);
 			renderer.stroke(this.starMask.getBounds());
 
+			renderer.setColor("#88cc44");
+			renderer.setGlobalAlpha(0.5);
+			renderer.fill(this.starMask.getBounds());
+			renderer.setGlobalAlpha(1.0);
+			renderer.stroke(this.starMask.getBounds());
+
+			renderer.setColor("#88cc44");
+			renderer.fill(this.starMask);
+			renderer.setColor("#55aa00");
+			renderer.stroke(this.starMask);
+
 			renderer.setGlobalAlpha(0.5);
 
 			renderer.setColor("#e15d55");
 			renderer.save();
-			renderer.translate(740, 200);
+			renderer.translate(740, 260);
 			renderer.rotate(this.arcAngle);
 			renderer.strokeArc(0, 0, 110, Math.PI, 0);
 			renderer.fillArc(0, 0, 110, 0, Math.PI);
@@ -191,9 +215,9 @@ const createGame = () => {
 			renderer.setColor("#00aa88");
 			renderer.translate(25, 0);
 			renderer.setMask(this.circleMask);
-			renderer.fillRect(580, 470, 200, 200);
-			renderer.strokeEllipse(630 + 50, 520 + 50, 70, 70);
-			renderer.strokeRect(600, 490, 160, 160);
+			renderer.fillRect(580, 510, 200, 200);
+			renderer.strokeEllipse(630 + 50, 560 + 50, 70, 70);
+			renderer.strokeRect(600, 530, 160, 160);
 			renderer.clearMask();
 
 			renderer.beginPath();
@@ -208,15 +232,32 @@ const createGame = () => {
 			renderer.stroke();
 
 			// dashed zigzag line
-			renderer.setLineDash([10, 6]);
+			renderer.setLineDash(this.dashZigzag);
 			renderer.beginPath();
 			renderer.moveTo(540, 50);
 			renderer.lineTo(640, 75);
 			renderer.lineTo(740, 50);
 			renderer.lineTo(840, 75);
 			renderer.lineTo(940, 50);
 			renderer.stroke();
-			renderer.setLineDash([]);
+			renderer.setLineDash(this.noDash);
+
+			// animated cubic bezier curve
+			const wave = Math.sin(this.ellipseTime / 500) * 50;
+			renderer.beginPath();
+			renderer.setColor("#10b981");
+			renderer.moveTo(540, 100);
+			renderer.bezierCurveTo(640, 30 - wave, 840, 170 + wave, 940, 100);
+			renderer.stroke();
+
+			// animated dashed quadratic bezier curve (inverted)
+			renderer.setLineDash(this.dashCurve);
+			renderer.beginPath();
+			renderer.setColor("#f59e0b");
+			renderer.moveTo(540, 100);
+			renderer.quadraticCurveTo(740, 130 - wave, 940, 100);
+			renderer.stroke();
+			renderer.setLineDash(this.noDash);
 
 			renderer.setColor("#ff69b4");
 			renderer.fill(this.roundRect1);
@@ -233,6 +274,6 @@ const createGame = () => {
 		}
 	}
 
-	game.world.addChild(new Graphics());
+	_app.world.addChild(new Graphics());
 };
 export const ExampleGraphics = createExampleComponent(createGame);

packages/melonjs/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## [18.3.0] (melonJS 2)
 
 ### Added
+- Renderer: `bezierCurveTo()`, `quadraticCurveTo()`, and `arcTo()` path methods — draw cubic and quadratic Bezier curves, matching the Canvas 2D API. Canvas renderer uses native context methods, WebGL renderer tessellates via Path2D.
 - Renderer: `setLineDash()` and `getLineDash()` methods — set dash patterns for stroke operations, matching the Canvas 2D API. Works on both Canvas and WebGL renderers. Dash state is saved/restored with `save()`/`restore()`.
 - Renderer: `createLinearGradient()` and `createRadialGradient()` methods — create gradient fills that can be passed to `setColor()`, matching the Canvas 2D API. Works on both Canvas and WebGL renderers with all fill methods (`fillRect`, `fillEllipse`, `fillArc`, `fillPolygon`, `fillRoundRect`). Gradient state is saved/restored with `save()`/`restore()`.
 - Tiled: extensible object factory registry for `TMXTileMap.getObjects()` — object creation is now dispatched through a `Map`-based registry (like `loader.setParser`), with built-in factories for text, tile, and shape objects, plus class-based factories for Entity, Collectable, Trigger, Light2d, Sprite, NineSliceSprite, ImageLayer, and ColorLayer
@@ -26,6 +27,8 @@
 - EventEmitter: `event.on()` and `event.once()` no longer create `.bind()` closures when a context is provided
 
 ### Fixed
+- Path2D: fix `quadraticCurveTo()` and `bezierCurveTo()` using a reference to `startPoint` instead of capturing coordinates — `lineTo()` mutates `startPoint` on each call, causing the curve to deform as it was tessellated. Captured `lx`/`ly` values instead.
+- Path2D: fix `quadraticCurveTo()` and `bezierCurveTo()` segment count — was using `arcResolution` directly (2 segments), now computes adaptive segment count based on control polygon length for smooth curves.
 - Application: `Object.assign(defaultApplicationSettings, options)` mutated the shared defaults object in both `Application.init()` and `video.init()` — creating multiple Application instances would corrupt settings. Fixed with object spread.
 - Text/Light2d: fix invalid `pool.push` on CanvasRenderTarget instances that were never pool-registered (would throw on destroy)
 - CanvasRenderTarget: `destroy(renderer)` now properly cleans up WebGL GPU textures and cache entries (previously leaked in Light2d)

packages/melonjs/src/geometries/path2d.js

@@ -552,11 +552,16 @@ class Path2D {
 	quadraticCurveTo(cpX, cpY, x, y) {
 		const points = this.points;
 		const startPoint = this.startPoint;
-		const lastPoint =
-			points.length === 0 ? startPoint : points[points.length - 1];
+		// capture coordinates (not reference) since lineTo mutates startPoint
+		const lx = points.length === 0 ? startPoint.x : points[points.length - 1].x;
+		const ly = points.length === 0 ? startPoint.y : points[points.length - 1].y;
 		const endPoint = pointPool.get().set(x, y);
 		const controlPoint = pointPool.get().set(cpX, cpY);
-		const resolution = this.arcResolution;
+		// estimate curve length via control polygon
+		const polyLen =
+			Math.sqrt((cpX - lx) ** 2 + (cpY - ly) ** 2) +
+			Math.sqrt((x - cpX) ** 2 + (y - cpY) ** 2);
+		const resolution = Math.max(4, Math.ceil(polyLen / this.arcResolution));
 
 		const t = 1 / resolution;
 		for (let i = 1; i <= resolution; i++) {
@@ -565,8 +570,8 @@ class Path2D {
 			const omt2 = omt * omt;
 			const ti2 = ti * ti;
 			this.lineTo(
-				lastPoint.x * omt2 + controlPoint.x * 2 * omt * ti + endPoint.x * ti2,
-				lastPoint.y * omt2 + controlPoint.y * 2 * omt * ti + endPoint.y * ti2,
+				lx * omt2 + controlPoint.x * 2 * omt * ti + endPoint.x * ti2,
+				ly * omt2 + controlPoint.y * 2 * omt * ti + endPoint.y * ti2,
 			);
 		}
 		pointPool.release(endPoint);
@@ -586,12 +591,18 @@ class Path2D {
 	bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y) {
 		const points = this.points;
 		const startPoint = this.startPoint;
-		const lastPoint =
-			points.length === 0 ? startPoint : points[points.length - 1];
+		// capture coordinates (not reference) since lineTo mutates startPoint
+		const lx = points.length === 0 ? startPoint.x : points[points.length - 1].x;
+		const ly = points.length === 0 ? startPoint.y : points[points.length - 1].y;
 		const endPoint = pointPool.get().set(x, y);
 		const controlPoint1 = pointPool.get().set(cp1X, cp1Y);
 		const controlPoint2 = pointPool.get().set(cp2X, cp2Y);
-		const resolution = this.arcResolution;
+		// estimate curve length via control polygon
+		const polyLen =
+			Math.sqrt((cp1X - lx) ** 2 + (cp1Y - ly) ** 2) +
+			Math.sqrt((cp2X - cp1X) ** 2 + (cp2Y - cp1Y) ** 2) +
+			Math.sqrt((x - cp2X) ** 2 + (y - cp2Y) ** 2);
+		const resolution = Math.max(4, Math.ceil(polyLen / this.arcResolution));
 
 		const t = 1 / resolution;
 		for (let i = 1; i <= resolution; i++) {
@@ -602,11 +613,11 @@ class Path2D {
 			const ti2 = ti * ti;
 			const ti3 = ti2 * ti;
 			this.lineTo(
-				lastPoint.x * omt3 +
+				lx * omt3 +
 					controlPoint1.x * 3 * omt2 * ti +
 					controlPoint2.x * 3 * omt * ti2 +
 					endPoint.x * ti3,
-				lastPoint.y * omt3 +
+				ly * omt3 +
 					controlPoint1.y * 3 * omt2 * ti +
 					controlPoint2.y * 3 * omt * ti2 +
 					endPoint.y * ti3,

packages/melonjs/src/video/canvas/canvas_renderer.js

@@ -356,6 +356,42 @@ export default class CanvasRenderer extends Renderer {
 		this.getContext().lineTo(x, y);
 	}
 
+	/**
+	 * Adds a quadratic Bezier curve to the current sub-path.
+	 * @param {number} cpx - The x-axis coordinate of the control point.
+	 * @param {number} cpy - The y-axis coordinate of the control point.
+	 * @param {number} x - The x-axis coordinate of the end point.
+	 * @param {number} y - The y-axis coordinate of the end point.
+	 */
+	quadraticCurveTo(cpx, cpy, x, y) {
+		this.getContext().quadraticCurveTo(cpx, cpy, x, y);
+	}
+
+	/**
+	 * Adds a cubic Bezier curve to the current sub-path.
+	 * @param {number} cp1x - The x-axis coordinate of the first control point.
+	 * @param {number} cp1y - The y-axis coordinate of the first control point.
+	 * @param {number} cp2x - The x-axis coordinate of the second control point.
+	 * @param {number} cp2y - The y-axis coordinate of the second control point.
+	 * @param {number} x - The x-axis coordinate of the end point.
+	 * @param {number} y - The y-axis coordinate of the end point.
+	 */
+	bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+		this.getContext().bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+	}
+
+	/**
+	 * Adds a circular arc to the current sub-path, using the given control points and radius.
+	 * @param {number} x1 - The x-axis coordinate of the first control point.
+	 * @param {number} y1 - The y-axis coordinate of the first control point.
+	 * @param {number} x2 - The x-axis coordinate of the second control point.
+	 * @param {number} y2 - The y-axis coordinate of the second control point.
+	 * @param {number} radius - The arc's radius. Must be non-negative.
+	 */
+	arcTo(x1, y1, x2, y2, radius) {
+		this.getContext().arcTo(x1, y1, x2, y2, radius);
+	}
+
 	/**
 	 * creates a rectangular path whose starting point is at (x, y) and whose size is specified by width and height.
 	 * @param {number} x - The x axis of the coordinate for the rectangle starting point.