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

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core';
import Konva from 'konva/lib/index';
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 myPath = new Konva.Path({
		x: 50,
		y: 40,
		data:
			'M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9C33.3,145.1,67.5,170.3,125,217c59.3.136.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9.3.13.1,6.7z',
		fill: 'red',
		scaleX: 0.5,
		scaleY: 0.5,
	});

	layer.add(myPath);
	stage.add(layer);
};

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