CHANNELS:

All
M
Canvas
Canvas
MammaMia posted a month ago

Hi, Chris!

How are you?

I have some problem. I putted the canvas element in HTML, at the bottom of page, when I am trying to Hover a balls, they are not going to be bigger, but when I refresh the page (somehow), it works!

Where could be a problem?

chris posted 24 days ago

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 :)

0
M
MammaMia posted 22 days ago

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.

0
chris posted 16 days ago

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!

0
M
MammaMia posted 15 days ago

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();
})
0

Want to participate?

Create a free Chris Courses account to begin

or
Sign In
Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Cheat Sheet

Providing the lift to launch your development career

© 2020 Chris Courses. All rights reserved.