<template>
	<div id="container"></div>
</template>

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core';
import Konva from 'konva/lib';
import { onMounted } from 'vue';

const { width, height } = useWindowSize();

const initial = () => {
	const stage = new Konva.Stage({
		container: 'container',
		width: width.value,
		height: height.value,
	});

	const layer = new Konva.Layer({ draggable: true });

	const text = new Konva.Text({
		text: 'Text Shadow!',
		fontFamily: 'Calibri',
		fontSize: 40,
		x: 20,
		y: 20,
		fill: 'green',
		// stroke: 'red',
		strokeWidth: 2,
		shadowColor: 'white',
		// shadowBlur: 0,
		shadowOffset: { x: 10, y: 10 },
		// shadowOpacity: 0.5
	});

	const rect = new Konva.Rect({
		x: 50,
		y: 20,
		// stroke: 'red',
		width: 100,
		height: 100,
		fill: 'red',
		draggable: true,
		globalCompositeOperation: 'xor',
	});

	layer.add(text);
	layer.add(rect);
	stage.add(layer);
};

onMounted(() => {
	initial();
});
</script>
