<template>
  <svg class="w-100 h-100 position-absolute">
    <defs>
      <clipPath id="webgl">
        <template v-for="anchor in anchors" :key="anchor">
          <WebGLClipPathRect :anchor="anchor" :canvas="canvas" :padding="padding" :radius="radius" />
        </template>
      </clipPath>
    </defs>
  </svg>
</template>

<script setup lang="ts">
import { AnchorPoint } from '@3cr/types-ts';

interface Props {
  anchors: AnchorPoint[];
  canvas: HTMLCanvasElement;
  padding?: number;
  radius?: number;
}

withDefaults(defineProps<Props>(), {
  padding: 8,
  radius: 8
});
</script>
