title: Cannot click button in HTML?
body: <p>So I have a page in <code>HTML</code> which has a background based on the well-known <a href="https://github.com/VincentGarreau/particles.js/" rel="nofollow noreferrer">particle library</a>. I have a button and there is a problem with it: it can be seen but it cannot be clicked. I tried changing the size and the alignment of the background but cannot make it to work... How to make the button clickable?</p>
  
  <p>My code:<br>
  HTML:  </p>
  
  <pre><code>&lt;div id="particles-js" &gt;&lt;canvas class="particles-js-canvas" width="500" height="1000"&gt;&lt;/canvas&gt;&lt;/div&gt;
  
  &lt;button type="button" class="btn btn-info" onclick="alert('hello')"&gt;Info&lt;/button&gt;
  </code></pre>
  
  <p>CSS:  </p>
  
  <pre><code>body {
      background: #212121;
  }
  
  .particles-js-canvas{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    right: 0px;
  }
  </code></pre>
  
  <p>And the <code>Javascript</code> code to initialize the particles:  </p>
  
  <pre><code>$(window).on('load', function() {
  
      particlesJS("particles-js", {
          "particles": {
              "number": {
                  "value": 400,
                  "density": {
                      "enable": true,
                      "value_area": 400
                  }
              },
              "color": {
                  "value": "#ffffff"
              },
              "shape": {
                  "type": "circle",
                  "stroke": {
                      "width": 0,
                      "color": "#000000"
                  },
                  "polygon": {
                      "nb_sides": 4
                  },
                  "image": {
                      "src": "http://wiki.lexisnexis.com/academic/images/f/fb/Itunes_podcast_icon_300.jpg",
                      "width": 100,
                      "height": 100
                  }
              },
              "opacity": {
                  "value": 0.5,
                  "random": true,
                  "anim": {
                      "enable": false,
                      "speed": 1,
                      "opacity_min": 0.1,
                      "sync": false
                  }
              },
              "size": {
                  "value": 2,
                  "random": true,
                  "anim": {
                      "enable": false,
                      "speed": 40,
                      "size_min": 0.1,
                      "sync": false
                  }
              },
              "line_linked": {
                  "enable": false,
                  "distance": 150,
                  "color": "#ffffff",
                  "opacity": 0.4,
                  "width": 1
              },
              "move": {
                  "enable": true,
                  "speed": 1,
                  "direction": "bottom",
                  "random": false,
                  "straight": true,
                  "out_mode": "out",
                  "bounce": false,
                  "attract": {
                      "enable": false,
                      "rotateX": 600,
                      "rotateY": 1200
                  }
              }
          },
          "interactivity": {
              "detect_on": "canvas",
              "events": {
                  "onhover": {
                      "enable": false,
                      "mode": "grab"
                  },
                  "onclick": {
                      "enable": false,
                      "mode": "repulse"
                  },
                  "resize": true
              },
              "modes": {
                  "grab": {
                      "distance": 200,
                      "line_linked": {
                          "opacity": 1
                      }
                  },
                  "bubble": {
                      "distance": 400,
                      "size": 40,
                      "duration": 2,
                      "opacity": 8,
                      "speed": 3
                  },
                  "repulse": {
                      "distance": 200,
                      "duration": 0.4
                  },
                  "push": {
                      "particles_nb": 4
                  },
                  "remove": {
                      "particles_nb": 2
                  }
              }
          },
          "retina_detect": true
      });
  });
  </code></pre>