Having trouble adding canvas properties to a canvas that was created dynamically. My VueJS code looks like so:
<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>
This dynamically creates a canvas given that the conditions of my fieldtype variable are met. My JS functions are written as so:
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);
}
When applied to a canvas that isn't dynamically created, the scripts work. However, on this dynamically created canvas I get the error message Error in v-on handler: "TypeError: voo.$refs[eve].getContext is not a function"
What can I do to add the getContext property to work on my canvas?
Oh, and for clarity, voo is my Vue instance.