<script setup lang="ts">
import { ref } from 'vue'
import Canvas from '../components/canvas/canvas.vue'

const canvasComponent = ref(null)

function downloadImage() {
  const imageUrl = canvasComponent.value!.toImage()
  const link = document.createElement('a')
  link.href = imageUrl
  link.setAttribute('download', 'canvas.png')
  document.body.appendChild(link)
  link.click()
}
</script>

<template>
  <div>
    <canvas ref="canvasComponent" :width="55" :height="20" />
    <button @click="downloadImage">
      Download Image
    </button>
  </div>
</template>