Particles.js not allowing spawn around text

I've finally got particle.js working as a background.

But you can only spawn stars when you click above or below the text (height-wise) you cannot spawn them where the text is (or on the same line as it's container).

Is there a way to fix this?

My HTML:

<link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">

<!-- particles.js container -->
<div id="particles-js"></div>
<!-- particles.js container -->

<body>
 <div class="something">
  <h1> MY TITLE </h1>
 </div>
</body>

<!-- particles.js library -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

My CSS:

* {
  margin: 0;
  padding: 0;
}

p { margin: 1em auto;}

canvas {
  display: block;
}


#particles-js {
 width: 100%;
  height: 100vh;
  background: -webkit-linear-gradient(top, #000000 1%, #0c0c24 100%);
  position: fixed;
  top: 0;
  left: 0;
  z-index: -50;
}

.something {
  text-align: center;
  margin: 0 auto;
  margin-top: 200px;
  font-family: 'Roboto', sans-serif;
}

.something h1 {
  color: white;
  font-size: 10em;
}

My JS:

particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 160,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 1,
      "random": true,
      "anim": {
        "enable": true,
        "speed": 1,
        "opacity_min": 0,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 4,
        "size_min": 0.3,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 1,
      "direction": "none",
      "random": true,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 600
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 250,
        "size": 0,
        "duration": 2,
        "opacity": 0,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});

Solution

Here is the fix.

You need to add the interactivity on the window as mentioned in the docs or define your own canvas to make it working

Here is the working fiddle

"interactivity": {
    "detect_on": "window",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "grab"
      },