<script setup lang="ts">
const point_array = useState<number[][] | undefined>('point_array', () => undefined)

const canvasElement: Ref<HTMLCanvasElement | undefined> = ref();
const context: Ref<CanvasRenderingContext2D | undefined> = ref();

const props = defineProps(['cw', 'ch'])
const nextFrame = () => new Promise(resolve => requestAnimationFrame(resolve));

const newDraw = async () => {
    context.value = canvasElement.value?.getContext('2d') || undefined;
    const lines = point_array.value
    if (!lines) return;

    context.value?.clearRect(0, 0, props.cw, props.ch)
    await nextFrame()

    for (let indexY = 0; indexY < lines.length; indexY++) {
        const line = lines[indexY];

        const drawLine = () => {
            line.forEach((point, indexX) => {
                if (canvasElement.value && context.value && point > 0) {
                    context.value.fillStyle = 'rgba(70, 0, 70, 0.5)'
                    context.value.fillRect(indexX, indexY, 1, 1)
                }
            })
        }
        drawLine()
        if (indexY % 10 == 0) await nextFrame()
    }
}
watch(point_array, (newStatus) => {
    newDraw()
})
onMounted(() => {
    newDraw()
})
</script>
<template>
    <canvas :width="props.cw" :height="props.ch" ref="canvasElement" style="position: absolute; z-index: -1;"></canvas>
</template>