zuramai / starback.js

Create a beautiful star falling background with starback.js
https://zuramai.github.io/starback.js/
392 stars 29 forks source link

Multiple canvas on same page not working as expected #7

Closed christophburger closed 2 years ago

christophburger commented 2 years ago

Hi,

Thank you for your awesome work!

Unfortunately, I found that the animated lines or dots are only rendered in the first canvas element when there is more than one <canvas> element on the same page.

<canvas id="canvas"></canvas>
<canvas id="canvas2"></canvas>
const canvas = document.getElementById('canvas')
  const starback = new Starback(canvas, {
      type: 'dot',
      quantity: 100,
      direction: 225,
      backgroundColor: ['#0e1118', '#232b3e'],
      randomOpacity: true,
  })

const starback2 = new Starback("#canvas2", {
  type: 'line',
  speed: 5,
  frequency: 5,
  slope: { x: -1, y: 10 },
  directionX: 1,
  speed: 3,
  spread: -10,
  randomOpacity: true,
  backgroundColor: ['#0F2027', '#203A43', '#2C5364'],
  quantity: 30,
})

Bildschirmfoto von 2022-06-08 11-21-17

Used version: https://unpkg.com/starback@2.0.1/dist/starback.js

I have recreated the example on Codepen: https://codepen.io/christophburger/pen/xxYaoow

It would be awesome if you could fix that :) Thank You!