Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot append Canvas in Vanilla JS Setup (WordPress Website) #53

Closed
TONYCRE8 opened this issue Mar 1, 2024 · 0 comments
Closed

Cannot append Canvas in Vanilla JS Setup (WordPress Website) #53

TONYCRE8 opened this issue Mar 1, 2024 · 0 comments

Comments

@TONYCRE8
Copy link

TONYCRE8 commented Mar 1, 2024

I'm currently running a vanilla JS setup (WordPress website, importing Babel-Core and ScratchCard.js in order to use this script), and I've currently hit a similar wall to #44 , however unlike their situation I cannot get my scratchcard to load at all. It responds with the error:

Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
    at ScratchCard.generateCanvas (ScratchCard.ts:210:22)
    at new ScratchCard (ScratchCard.ts:60:10)
    at myscript.js

It seems that the offending function is all to do with generating a canvas, not being able to append anything to the canvas. Unsure of why this is creating so much of an issue. I believe I've imported all of my files properly too:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.26.3/browser.min.js?ver=11:10:34" id="babel-core-js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/build/scratchcard.min.js?ver=11:10:34" id="scratchcard-js"></script>
<script type="module" src="https://my.site/wp-content/themes/my-theme/js/myscript.js?ver=11:10:34"></script>

The code in myscript.js is the following:

import 'https://cdn.jsdelivr.net/npm/[email protected]/build/scratchcard.js'; 

/* Scratchcard JS */
const scContainer = document.getElementById('js--sc-container');
const sc = new ScratchCard('#js--sc--container', {
    scratchType: SCRATCH_TYPE.CIRCLE,
    containerWidth: scContainer.offsetWidth,
    containerHeight: scContainer.offsetHeight,
    imageForwardSrc: 'https://geek.design/wp-content/uploads/2024/03/gluttony-scratchcard-front.png',
    imageBackgroundSrc: 'https://geek.design/wp-content/uploads/2024/03/gluttony-scratchcard-back.png',
    clearZoneRadius: 50,
    nPoints: 30,
    pointSize: 10,
    callback: function () {
        console.log('Scratch complete!');
    }
});
sc.init().then(() => {
    sc.canvas.addEventListener('scratch.move', function () {
        console.log('Scratch move!');
    });
}).catch((error) => {
    console.error(error);
});

Any and all help is greatly appreciated.

@TONYCRE8 TONYCRE8 closed this as completed Mar 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant