[Pattern] Support custom patterns when using Canvas

Currently if you define a custom pattern via patternContext() snippet it only works for Svg as it uses <def><pattern>...</pattern></def>

<Pattern width={4} height={4}>
  {#snippet patternContent()}
    <line x2="100%" class="stroke-surface-content" />
  {/snippet}

  {#snippet children({ pattern })}
    <Rect
      width={100}
      height={300}
      fill={pattern}
    />
  {/snippet}
</Pattern>

While the simplified patterns handle most of the common use cases, it would be nice to support custom patterns with <Canvas> at some point.

Using a second <Canvas> for the pattern and LayerChart primitives (Rect, Line, Circle, etc) and then pass a references to ctx.createPattern(..., 'repeat') would probably work...

Start by tracing how patternContext() is handled for Svg and how Pattern and Canvas primitives are exposed. Compare that path with the proposed second Canvas and ctx.createPattern(..., 'repeat') approach; done means custom pattern content works with Canvas-based primitives.