Empty scrawl.library.canvas (canvas could not be found?) in Vue2

[Sjoerd82]

I am new to scrawl-canvas (like 10-minutes in kind of new), so my first goal is to get the hello world to work within my Vue2 project (soon to be Vue3), with the end goal of generating a downloadable 256x256 avatar based on a transparent png + circular mask + another image (seems within the realm of Scrawl-canvas possibilities, right?).

I'm trying the hello world example from the front page. But this being Vue, this happens within a component:

<template>
    <div>
        <canvas id="mycanvas"></canvas>
        <v-btn @click="helloworld()">go!</v-btn>
    </div>
</template>
import * as scrawl from 'scrawl-canvas'
export default {
    methods: {
        helloworld() {
            let canvas = scrawl.library.canvas.mycanvas
            console.log(scrawl.library.canvas) // empty object!

            // Setup the scene to be displayed in the canvas
            scrawl.makePhrase({
                name: 'hello',
                text: 'Hello, World!',
                width: '100%',
                startX: 20,
                startY: 20,
                font: 'bold 40px Garamond, serif',
            });

            // Render the canvas scene once
            canvas.render(); // Error, canvas is undefined.
        }
    },
}

However, the canvas object remains empty.

[KaliedaRik]

Hi, Sjoerd82

I'm not sure I can be of much help to you here as I have no experience of using the Vue framework. I have managed to add SC to a very basic React website, and also to Svelte (as seen in the library's website, which is built using Svelte). There's a couple of "How Do I" articles on how to include SC in these frameworks, which might offer some insights?

React: https://scrawl-v8.rikweb.org.uk/how-do-i/add-to-a-react-project/
Svelte: https://scrawl-v8.rikweb.org.uk/how-do-i/add-to-a-svelte-project/

If you do manage to solve the issue, then I'll be more than happy to add a similar Vue article to the website.

Edit:

Try replacing let canvas = scrawl.library.canvas.mycanvas with let canvas = scrawl.getCanvas('mycanvas');

SC runs once on initial load which, given that it's probably in a bundle of code, will be on initial load of the site. The component code adds a canvas element to the DOM, but SC won't automatically pick it up. Instead you have to run the getCanvas function after the canvas has been created to get a handle on it.

[Sjoerd82]

Thanks, that was helpful. It's actually:

let canvas = scrawl.getCanvas('#mycanvas')

So, the instructions for Vue2 (and probably Vue3) are simply to call getCanvas() (see above) instead of:

let canvas = scrawl.library.canvas.mycanvas