Canvas: drawPattern repeat-x/repeat-y doesn't match WebGL behavior

[obiot]

Description

drawPattern with repeat-x or repeat-y produces different visual results between the Canvas and WebGL renderers.

WebGL behavior (correct for games)

• repeat-x: the pattern repeats horizontally. Vertically, the edge pixels are stretched to fill the full height (GL_CLAMP_TO_EDGE), producing vertical stripes that fill the entire draw area.
• repeat-y: the pattern repeats vertically. Horizontally, the edge pixels are stretched to fill the full width, producing horizontal stripes that fill the entire draw area.

Canvas behavior (current)

• repeat-x: the pattern repeats horizontally but only covers one tile height (e.g. 32px). The rest of the fill area is transparent, showing only a thin horizontal strip at the top.
• repeat-y: the pattern repeats vertically but only covers one tile width. The rest is transparent, showing only a thin vertical strip on the left.

Why it happens

Canvas 2D CanvasPattern with repeat-x only tiles in the X direction. In the Y direction, the pattern simply doesn't exist beyond the first tile. This is per the HTML Canvas 2D spec, but doesn't match what game developers expect — nor does it match the WebGL renderer's output.

Expected behavior

Both renderers should produce the same visual result. For repeat-x, the pattern should tile horizontally and the non-repeating axis should fill the draw area (either by stretching edge pixels like WebGL, or by clamping/repeating the single row).

Proposed solution

In the Canvas renderer's drawPattern, detect repeat-x/repeat-y and manually pre-tile the source image to fill the draw area before creating the CanvasPattern. Alternatively, create an intermediate canvas that's pre-stretched in the non-repeating direction.

Reproduction

The Graphics example has a createPattern demo that cycles through all repeat modes every 2 seconds. Compare the output between Canvas and WebGL renderers to see the difference.

Location: src/video/canvas/canvas_renderer.js — drawPattern() and createPattern()