Canvas option error on Reactjs

[rainstormza]

  componentDidMount() {
    window.bubbly({
      colorStart: "#fff4e6",
      colorStop: "#ffe9e4",
      blur: 1,
      compose: "source-over",
      bubbleFunc: () => `hsla(${Math.random() * 50}, 100%, 50%, .3)`,
      canvas: document.getElementById("background") // error this line
    });
  }

I've tried to use your lib like this, it work fine until I added option canvase and then it throw an error.

Any help ? thanks :)

[tipsy]

Did you read through https://reactjs.org/docs/cross-origin-errors.html ?

Seems weird that it only happens if you specify a canvas. How does the HTML for your canvas look?

[rainstormza]

Yes, I did.
I've tried

but it does not work.

this is my test component

I'm just curious that what canvas option exactly mean.
If I want background to show only inside this div (id = "background") so I have to use this option.
Am i right ?

you can try my repo. https://github.com/rainstormza/react-bubble

[tipsy]

You're right, but it has to be a <canvas> element (docs), not a <div>.

Here is an example: https://tipsy.github.io/bubbly-bg/custom-canvas-example.html

Using a div shouldn't really give you the error you're seeing, but let me know if using a canvas fixes it.

[rainstormza]

it works, my bad
thanks for your help :)