fix(imagelayer): converge Canvas/WebGL output on repeat-x / repeat-y / no-repeat

packages/melonjs/CHANGELOG.md

@@ -13,6 +13,7 @@
 - WebGL: `MaterialBatcher.uploadTexture` was using its `w` and `h` parameters (the destination quad size, not the texture's) for the `isPOT` check, which drives both the wrap-mode fallback and the `generateMipmap` gate. Visible as a `GL_INVALID_OPERATION` from `gl.generateMipmap` on WebGL 1; silent wasted work (unnecessary mipmaps, wrong `isPOT`-derived state) on WebGL 2. Texture dimensions are now derived from the source itself.
 - SAT: ellipse collisions silently failed whenever the body's ancestor container had a non-zero absolute position (the typical case: `level.load` auto-centers the level container when the viewport is larger than the map, setting `container.pos` to a non-zero offset). `testEllipseEllipse` and `testPolygonEllipse` built the relative-position vector by *adding* `a.ancestor.getAbsolutePosition()` where they should have subtracted it, shifting the circle by `2 * ancestor.absPos`. The polygon/polygon path is unaffected — it builds two absolute positions and lets `isSeparatingAxis` do the subtraction. Latent because every existing SAT unit test wired the mock ancestor to `(0, 0)`, where the sign error is arithmetically invisible.
 - TMX: static children of an auto-centered level container kept stale absolute bounds. `TMXTileMap.addTo` sets `container.pos` *after* adding children, so each child's cached absolute bounds (computed at `addChild` time) didn't include the centering offset. Children that moved on their own refreshed via the `pos` observer, but TMX layers, Tiled collision shapes, triggers, and decorative sprites stayed stuck at their pre-centering bounds — visible as debug overlay shapes drawn at the wrong screen position, and as broken viewport culling for anything outside the pre-centering box. `_setBounds` now walks the container subtree and refreshes absolute bounds after the position actually moves (both initial load and viewport resize).
+- ImageLayer: `repeat-x` / `repeat-y` / `no-repeat` produced different visual output on Canvas vs WebGL (issue #1290). `ImageLayer.draw` was asking the renderer to fill `viewport.width * 2` × `viewport.height * 2` regardless of repeat mode, then leaning on each renderer's overflow behavior on the non-tiling axis — Canvas leaves the overflow transparent (HTML spec), WebGL stretches the bottom row / right column via `GL_CLAMP_TO_EDGE`. The draw extent is now clamped to the source dimensions on any axis that isn't tiling, so neither renderer enters its overflow path and both produce the same strip-shaped output. Matches Pixi's `TilingSprite` mental model (no `repeat-x` / `repeat-y` flags — the tile rectangle is the tile rectangle).
 
 ### Changed
 - WebGL 1: removed the unconditional `[Texture] ... is not a POT texture` warning. The engine handles NPOT correctly (clamp wrap, non-mipmapped filters). A targeted warning now fires only when `repeat: "repeat*"` is requested on an NPOT texture under WebGL 1, the one case where the user's intent is silently downgraded.

packages/melonjs/src/renderable/imagelayer.js

@@ -324,13 +324,18 @@ export default class ImageLayer extends Sprite {
 			renderer.setMask(this.mask);
 		}
 
-		renderer.drawPattern(
-			this._pattern,
-			0,
-			0,
-			viewport.width * 2,
-			viewport.height * 2,
-		);
+		// Clamp the draw extent to the source dimensions on any axis we
+		// are NOT tiling. Asking the renderer to fill past the source on
+		// a non-tiling axis is what makes Canvas (transparent fill per
+		// HTML spec) and WebGL (GL_CLAMP_TO_EDGE stretches the edge
+		// pixel) diverge — Canvas leaves the overflow transparent while
+		// WebGL stretches the bottom row (repeat-x) or right column
+		// (repeat-y) to fill it. By drawing exactly the source extent on
+		// the non-tiling axis, neither renderer enters its overflow path
+		// and the two outputs converge (issue #1290).
+		const drawW = this.repeatX ? viewport.width * 2 : width;
+		const drawH = this.repeatY ? viewport.height * 2 : height;
+		renderer.drawPattern(this._pattern, 0, 0, drawW, drawH);
 	}
 
 	// called when the layer is removed from the game world or a container