CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Brandsma
Brandsma

Reputation: 35

Canvas interaction through an overlapping HTML element

I'd like to have canvas interaction through a different HTML element.

I have been using the particles.js package and I added an overlapping HTML element to it. The overlapping element has no background (i.e. background: none) and only some text. However, the background of the overlapping element still blocks any canvas interaction.

I expect that the dots make connecting lines with the cursor both inside and outside of the box.

Here is an interaction:

interaction with canvas

Here is no interaction, where I would want it:

no interaction with canvas

A minimum working example can be found here. This example has been adapted from another codepen in order to show the problem clearly.

Is there any way to get an interaction through overlapping HTML elements?

Upvotes: 0

Views: 376

Answers (1)

Brandsma
Brandsma

Reputation: 35

As markE mentioned in the comments.

Setting pointer-events: none makes it possible to sent canvas interaction through an overlapping element.

edit: I have added the working code to the minimum working example. One only needs to uncomment it in the css.

Upvotes: 1

Related Questions