<script setup lang="ts">
const testImg = '/_nuxt/assets/img/plan.svg'
const canvasElement: Ref<HTMLCanvasElement | undefined> = ref();
const context: Ref<CanvasRenderingContext2D | undefined> = ref();
console.log(testImg)
onMounted(async () => {
    context.value = canvasElement.value?.getContext('2d') || undefined;
    if (context.value) {
        const img = await new Promise((resolve, reject) => {
            let img = new Image()
            img.onload = () => resolve(img)
            img.onerror = reject
            img.src = testImg
            return img
        })
        const sourceWidth = img.width
        const sourceHeight = img.height

        const canvasHeight = canvasElement.value?.height || 1
        const canvasWidth = canvasElement.value?.width

        const imgHeight = (sourceHeight / sourceWidth) * canvasHeight
        context.value.drawImage(img, 0, 0, canvasWidth, imgHeight)
        // context.value.scale(2,2)
    }
})
</script>
<template>
    <canvas ref="canvasElement" width="1300" height="1000"></canvas>
</template>