Пытаюсь написать простой код, где в один из компонентов встроен canvas по которому можно рисовать мышью
Набросала простой код, который отрабатывает без использования vue.js
https://codepen.io/wera-pinky/pen/zYxgNdO
Адаптировать его для vue не выходит - компонент на событие реагирует, но линию не строит
в чем может быть причина?
код компонента ниже
<template>
<div class="app-wrapper" >
<canvas id="canvas"
@mouseup="finishedPosition()"
@mousedown="startPosition()"
@mousemove="draw($event)"
></canvas>
</div>
</template>
<script>
export default {
data() {
return {
painting:false
}
},
methods: {
startPosition(){
this.painting=true;
},
finishedPosition(){
this.painting=false;
this.ctx.beginPath();
},
draw(event){
if(this.painting){
canvas.height=288;
canvas.width=document.querySelector('.app-wrapper').clientWidth;
this.ctx.lineWidth=5;
this.ctx.lineCap='round';
this.ctx.lineTo(event.clientX, event.clientY);
this.ctx.stroke();
this.ctx.beginPath();
this.ctx.moveTo(event.clientX, event.clientY);
this.ctx.fill()
}
}
},
computed: {
ctx(){
return document.querySelector('#canvas').getContext('2d');
}
},
}
</script>
<style scoped>
.app-wrapper {
min-height: 288px;
max-width: 82.92%;
}
</style>
