Простая рисовалка на Vue.js

<div id="app" class="app" v-cloak>
  <canvas class="app__canvas" @mousedown="handleMouseDown" @mouseup="handleMouseUp" @mousemove="handleMouseMove"></canvas>
  <footer class="app__footer">
    <div class="app__options">
      <button class="app__minus" @click="decreaseSize" title="Уменьшить">–</button>
      <span class="app__size" title="Размер кисти">{{size}}</span>
      <button class="app__plus" @click="increaseSize" title="Увеличить">+</button>
      <input type="color" v-model="color" title="Выбрать цвет">
    </div>
    <button class="app__close" @click="clearCanvas" title="Удалить">X</button>
  </footer>
</div>
<dialog class="app__modal">
  <div class="app__modal-inner">
    <p>Изменили размер экрана?</p>
    <p>Перезагрузите страницу</p>
  </div>
</dialog>

.app {
  display: flex;
  flex-direction: column;
  inline-size: min(1000px, 100%);
  block-size: 100%;
  border: 2px solid #3498DB;
}
.app__canvas {
  flex-grow: 1;
  background-color: #fff;
}
.app__footer {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background-color: #3498DB;
}
.app__options {
  display: flex;
  gap: 0 10px;
  block-size: 50px;
}
.app__options > *, .app__close {
  display: grid;
  place-items: center;
  aspect-ratio: 1/1;
  block-size: 100%;
  background-color: #fff;
  font-size: 28px;
  border: 1px solid #000;
}
.modal {
  font-size: 21px;
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

const {createApp,ref,onMounted} = Vue
createApp({
  setup() {
    const canvas = ref(null)
    const size = ref(5)
    const min_size = ref(5)
    const max_size = ref(50)
    const increment = ref(5)
    const color = ref('#000000')
    const is_pressed = ref(false)
    const x = ref(0)
    const y = ref(0)
    const increaseSize = () => {
      if (size.value < max_size.value) size.value += increment.value
    }
    const decreaseSize = () => {
      if (size.value > min_size.value) size.value -= increment.value
    }
    const handleMouseDown = (e) => {
      is_pressed.value = true
      x.value = e.offsetX
      y.value = e.offsetY
    }
    const handleMouseUp = () => {
      is_pressed.value = false
      x.value = undefined
      y.value = undefined
    }
    const handleMouseMove = (e) => {
      if (is_pressed.value) {
        const x2 = e.offsetX
        const y2 = e.offsetY
        drawCircle(x2, y2)
        drawLine(x.value, y.value, x2, y2)
        x.value = x2
        y.value = y2
      }
    }
    const drawCircle = (x, y) => {
      let ctx = canvas.value
      ctx.beginPath()
      ctx.arc(x, y, size.value, 0, Math.PI * 2)
      ctx.fillStyle = color.value
      ctx.fill()
    }
    const drawLine = (x1, y1, x2, y2) => {
      let ctx = canvas.value
      ctx.beginPath()
      ctx.moveTo(x1, y1)
      ctx.lineTo(x2, y2)
      ctx.strokeStyle = color.value
      ctx.lineWidth = size.value * 2
      ctx.stroke()
    }
    const clearCanvas = () => {
      let c = document.querySelector('.app__canvas')
      c.width = c.offsetWidth
      c.height = c.offsetHeight
      canvas.value.clearRect(0, 0, c.width, c.height)
    }
    onMounted(() => {
      let c = document.querySelector('.app__canvas')
      c.width = c.offsetWidth
      c.height = c.offsetHeight
      canvas.value = c.getContext('2d')
      const dialog = document.querySelector("dialog")

      window.addEventListener('resize', () => {
        if (!dialog.hasAttribute('open')) {
          dialog.showModal()
          setTimeout(() => {
            dialog.close()
          }, 2000)
        }
      })
    })
    return {canvas,size,min_size,max_size,increment,color,is_pressed,x,y,increaseSize,decreaseSize,handleMouseDown,handleMouseUp,handleMouseMove,drawCircle,drawLine,
      clearCanvas
    }
  }
}).mount('#app')