<script setup>
onMounted(() => {
let canvas= document.getElementById("myCanvas")
let context = canvas?.getContext("2d")
canvas.onmousedown = function (){
canvas.onmousemove = function (event){
let x = event.offsetX
let y = event.offsetY
context.fillRect(x-5, y-5, 5, 5)
}
canvas.onmouseup = function (){
canvas.onmousemove = null
}
}
})
</script>
вообще такой код пишется проще:
<canvas
@mousedown="canvasMouseDowned = true"
@mousemove="canvasMouseMove"
@mouseup="canvasMouseDowned = false"
class="signature"
width="900"
height="600"
/>
<script setup lang="ts">
const canvasMouseDowned = ref(false)
function canvasMouseMove(event: MouseEvent) {
if (!canvasMouseDowned.value) return
let x = event.offsetX
let y = event.offsetY
if (event.target) {
let context = (event.target as HTMLCanvasElement).getContext('2d')
context?.fillRect(x-5, y-5, 5, 5)
}
}