Tiene problemas para agregar propiedades de lienzo a un lienzo que se creó dinámicamente. Mi código VueJS se ve así:
<div v-if="fieldtype === 'signature'"> <canvas v-bind:id="en.name" :ref="en.name" class="sigpad" v-on:mousedown="drawdown($event, en.name)" v-on:mousemove="drawmove($event, en.name)" v-on:mouseup="drawup($event, en.name)"> </canvas> </div> Esto crea dinámicamente un lienzo dado que se cumplen las condiciones de mi fieldtype de tipo de campo. Mis funciones JS están escritas así:
function drawup(ev, eve){ voo.isDrawing = false; } function drawmove(ev, eve){ let ctx = voo.$refs[eve].getContext('2d'); if (voo.isDrawing){ let rect = voo.$refs[eve]; let elementRelativeX = ev.offsetX; let elementRelativeY = ev.offsetY; let cX = elementRelativeX * rect.width / rect.clientWidth; let cY = elementRelativeY * rect.height / rect.clientHeight; ctx.lineTo(cX, cY); ctx.stroke(); } } function drawdown(ev, eve){ let ctx = voo.$refs[eve].getContext('2d'); voo.isDrawing = true; let rect = voo.$refs[eve]; let elementRelativeX = ev.offsetX; let elementRelativeY = ev.offsetY; let cX = elementRelativeX * rect.width / rect.clientWidth; let cY = elementRelativeY * rect.height / rect.clientHeight; ctx.moveTo(cX, cY); } Cuando se aplica a un lienzo que no se crea dinámicamente, los scripts funcionan. Sin embargo, en este lienzo creado dinámicamente aparece el mensaje de error Error in v-on handler: "TypeError: voo.$refs[eve].getContext is not a function"
¿Qué puedo hacer para agregar la propiedad getContext para que funcione en mi lienzo?
Ah, y para mayor claridad, voo es mi instancia de Vue.