Hi! I'm well, hope you are too!

Would you be able to post a code snippet of your .js file? If you hit the { } icon on the top of the text editor here, it should transform your code to look something like this:

const test = 'string here'

Should be able to help you out a bit better with a code example :)

Hi!

I can send you my pages address, scroll to the bottom of page.

https://rolandspolo.github.io/

If you refresh the page on that CANVAS, it will work, but for the first time it doesn't work.

Very cool website, really like the creativity behind everything you're doing.

Regarding your issue with the balls not expanding, my first thought is that it's due to the offset of the canvas relative to the window's scroll position. Whenever you add a canvas to a page that requires scrolling and interaction, you have to subtract the window's scroll position and or the canvas' offset from the top of the window, from your mousemove event listener's clientY.

So wherever you're setting clientY you need to subtract from it, the canvas' offset which you can obtain with getBoundingClientRect().top, then also subtract the window's scroll which you can get with window.scrollY. Think you should be good after that, let me know if that helps!

Hi, thanks!

Something like this ?

const offsetLeft = document.getElementById('flyingBalls').getBoundingClientRect().left;
const offsetTop = document.getElementById('flyingBalls').getBoundingClientRect().top;

let mouse = {
    x: undefined,
    y: undefined
}
var maxRadius1 = 40;
let ballCount1 = 1000;
var colorArray = [
    '#829FD9',
    '#027368',
    '#FFEF00',
    '#BFB634',
    '#0D0D0D',
]
window.addEventListener('mousemove', function (event) {
    mouse.x = event.x - offsetLeft;
    mouse.y = event.y - offsetTop - window.scrollY;
})
window.addEventListener('resize', function () {
    canvas4.width = window.innerWidth;
    // canvas.height = window.innerHeight;

    init1();
})