How can I draw Canvas conditional onload with v-if?

Question

I'm new to Vue and JavaScript, so please help me understand this problem:

I want to dynamically showload different canvas elements on a page. The drawing of the canvas is defined in a seperate script.js file.

Here's a section of my code:

<canvas v-if="checkedBoxes.includes('Heart')" onload="drawHeart();" id="heartCanvas" width="300" height="240"></canvas>
<canvas v-if="checkedBoxes.includes('Star')" onload="drawStar();" id="starCanvas" width="240" height="240"></canvas>

script.js:

function drawHeart() {
let heartCanvas = document.getElementById("heartCanvas");
let c = heartCanvas.getContext('2d');
c.beginPath();
... }

However, when a canvas element appears, it is not drawn by the Javascript function drawXY(). It seems to me that the onload event is not triggered when the element appears on the page. I also tried it with the Vue expression v-on:load="drawXY" without success. When i change the event trigger to onclick, it works, but that's not what I need.

entli · Accepted Answer · 2021-12-20T20:34:25.947

So I finally found a solution for my problem!

As I learned, onload events are not supported on every HTML element, only a few such as <body>, <frame>, <iframe>, <img> , ... See https://stackoverflow.com/a/42004669

So I added an empty image after the canvas element, which executes the drawXY() function on load of the image.

Here's the updated code:

<template v-if="checkedBoxes.includes('Heart')">
    <canvas id="heartCanvas" width="300" height="240"></canvas>
    <!-- empty image for onload event -->
    <img onload="drawHeart();" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />
</template>

<template v-if="checkedBoxes.includes('Star')">
    <canvas id="starCanvas" width="240" height="240"></canvas>
    <!-- empty image for onload event -->
    <img onload="drawStar();" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />
</template>

It's the best workarround I've found, as other variants such as executing the function right after a checkbox is selected usually end up not working because the <canvas> element is not yet rendered and as a consequence, document.getElementById returns null. <script> tags are not allowed within v-if templates as they could have nasty side-effects.

But if you have a better solution, please feel free to share it!

Also a similar problem is described here: https://stackoverflow.com/questions/22670482/canvas-onload-event-isnt-firing#comment34534892_22670643 — entli, Dec 20 '21 at 20:00

How can I draw Canvas conditional onload with v-if?

1 Answers1