Add gradient support to renderer API

[obiot]

Summary

Closes #1352

• New Gradient class with addColorStop(), matching the Canvas 2D API
• createLinearGradient(x0, y0, x1, y1) and createRadialGradient(x0, y0, r0, x1, y1, r1) on both renderers
• setColor() accepts Gradient objects — works with all fill methods (fillRect, fillEllipse, fillArc, fillPolygon, fillRoundRect)
• Canvas renderer: uses native CanvasGradient directly as fillStyle
• WebGL renderer: renders gradient to CanvasRenderTarget texture via drawImage; non-rect shapes use stencil masking
• Gradient state tracked in RenderState and saved/restored with save()/restore()
• New gradients example showcasing sky backgrounds, health/mana bars, metallic button, gradient-filled shapes, and rainbow star polygon

Test plan

• 24 unit tests: API, caching, setColor, fillRect, color/gradient mixing, save/restore
• Visual parity verified between Canvas and WebGL renderers
• Gradient example works on both renderers (AUTO, CANVAS)

🤖 Generated with Claude Code

[Copilot]

Pull request overview

Adds first-class gradient fills to the melonJS renderer abstraction, aligning the engine’s drawing API more closely with the Canvas 2D API while supporting both Canvas and WebGL backends.

Changes:

• Introduces a new Gradient class (addColorStop, canvas/texture generation + caching) and exposes createLinearGradient / createRadialGradient on the base Renderer.
• Extends Canvas and WebGL renderers to accept gradients via setColor() and render gradient fills across primitive fill methods.
• Adds unit tests, a new gradients example, and updates docs/changelog to reflect the new API.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
README.md	Links the rendering API bullet to the wiki page.
packages/melonjs/tests/gradient.spec.js	Adds unit tests for the new Gradient API and renderer integration.
packages/melonjs/src/video/webgl/webgl_renderer.js	Implements gradient support in WebGL, including stencil-based masking for non-rect shapes.
packages/melonjs/src/video/renderstate.js	Tracks gradient state in the save/restore render state stack.
packages/melonjs/src/video/renderer.js	Adds gradient factory methods to the base renderer API.
packages/melonjs/src/video/gradient.js	New Gradient implementation (color stops, canvas gradient, POT texture canvas).
packages/melonjs/src/video/canvas/canvas_renderer.js	Implements gradient support for Canvas via native CanvasGradient.
packages/melonjs/src/index.ts	Exports Gradient from the public API.
packages/melonjs/CHANGELOG.md	Documents the new gradient renderer API.
packages/examples/src/main.tsx	Registers the new Gradients example route.
packages/examples/src/examples/gradients/ExampleGradients.tsx	Adds a gradients showcase example scene.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 7 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 6 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated 6 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

packages/melonjs/src/video/renderstate.js:58

• New state fields currentGradient, lineDash, and lineDashOffset are introduced here, but RenderState.reset() doesn’t currently restore them to their defaults. That means renderer.reset() can leave gradient/dash state active across resets. Please update RenderState.reset() to set these back to null / [] / 0 alongside the other state resets.

		/**
		 * current gradient fill (null when using solid color)
		 * @type {Gradient|null}
		 */
		this.currentGradient = null;

		/**
		 * current line dash pattern (empty array = solid line)
		 * @type {number[]}
		 */
		this.lineDash = [];

		/**
		 * current blend mode
		 * @type {string}
		 */
		this.currentBlendMode = "none";

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.