PaperJS + Vue 3 Composition API: Drawing Tool

UsageScript.vue

<script setup lang="ts">
import VectorCanvas from "path/to/componentVectorCanvas.vue";
const drawingSVG = ref()
</script>

<template>
      <VectorCanvas ref="signCanvas" :width="400" :height="300" />
      <button color="white" text-color="black" label="Apply" @click="drawingSVG = signCanvas.saveImage()" />
</template>

VectorCanvas.vue

<script setup lang="ts">
import paper from "paper"
import { ref, onMounted } from 'vue'
const canvas = ref()
const path = ref()
const isDrawing = ref(false)

const props = defineProps<Props>();

type Props = {
    width: number,
    height: number,
};

onMounted(() => {
    paper.setup(canvas.value);

    // This is a dirty hack to make PaperJS set the canvas size correctly. I don't know why it doesn't set canvas size correctly without this lines.
    canvas.value.width = props.width;
    canvas.value.height = props.height;
})

function beginDrawing(event) {
    isDrawing.value = true;
    path.value = new paper.Path();
    path.value.strokeColor = 'black';
    paper.view.draw();
    var start = new paper.Point(event.offsetX, event.offsetY);
    path.value.moveTo(start);
}

function keepDrawing(event) {
    if (isDrawing.value) {
        let point = new paper.Point(event.offsetX, event.offsetY);
        path.value.lineTo(point);
    }
}

function stopDrawing(event) {
    isDrawing.value = false;
}

function saveImage() {
    console.log(paper.project.exportSVG({ asString: true }))
    return paper.project.exportSVG()
}

defineExpose({
    saveImage
});
</script>

<template>
    <main>
        <canvas id="paper-canvas" :width="width" :height="height" ref="canvas" resize @mousedown="beginDrawing"
            @mousemove="keepDrawing" @mouseup="stopDrawing" @mouseleave="stopDrawing"
            style="border: 1px solid black;"></canvas>
    </main>
</template>