[Pattern] Support custom patterns when using Canvas

[techniq]

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...