title: Uncaught TypeError: Cannot set property 'width' of null
body: <p>Not much of a javascript person, so you'll have to forgive me. I'm trying to get this HTML template in shape but I keep running into an error that I believe is causing some layout issues.</p>
  
  <p>Here's the error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot set property 'width' of nulL at e
    (animated1.self-b9a4c7f67d0005da19c8ed8c98254dd633747e3b9330fd1ca028e36c397fd765.js:6)
    at
    animated1.self-b9a4c7f67d0005da19c8ed8c98254dd633747e3b9330fd1ca028e36c397fd765.js:94
    at
    animated1.self-b9a4c7f67d0005da19c8ed8c98254dd633747e3b9330fd1ca028e36c397fd765.js:95</p>
  </blockquote>
  
  <p>Here's the snippet of code from animated1 </p>
  
  <pre><code>! function() {
  function e() {
      u = window.innerWidth, v = window.innerHeight, g = {
          x: u / 2,
          y: v / 2
      }, f = document.getElementById("main-header"), h = document.getElementById("demo-canvas"), h.width = u, h.height = v, m = h.getContext("2d"), w = [];
      for (var e = 0; u &gt; e; e += u / 20)
          for (var n = 0; v &gt; n; n += v / 20) {
              var t = e + Math.random() * u / 20,
                  o = n + Math.random() * v / 20,
                  i = {
                      x: t,
                      originX: t,
                      y: o,
                      originY: o
                  };
              w.push(i)
          }
      for (var a = 0; a &lt; w.length; a++) {
          for (var r = [], c = w[a], l = 0; l &lt; w.length; l++) {
              var y = w[l];
              if (c != y) {
                  for (var p = !1, M = 0; 5 &gt; M; M++) p || void 0 == r[M] &amp;&amp; (r[M] = y, p = !0);
                  for (var M = 0; 5 &gt; M; M++) p || s(c, y) &lt; s(c, r[M]) &amp;&amp; (r[M] = y, p = !0)
              }
          }
          c.closest = r
      }
      for (var a in w) {
          var b = new d(w[a], 2 + 2 * Math.random(), "rgba(255,255,255,0.3)");
          w[a].circle = b
      }
  }  
  </code></pre>
  
  <p>This is the HTML section</p>
  
  <pre><code>&lt;header id="main-header" class="parallax-main-header" data-scroll-index="0"&gt;
  &lt;canvas class="hide-on-med-and-down" id="demo-canvas"&gt;&lt;/canvas&gt;
  &lt;div class="overlay gradient-color"&gt;&lt;/div&gt;
  
  &lt;div id="scene" data-hover-only="true" data-relative-input="true" class="parallax" &gt;
  
      &lt;div class="layer" data-depth="1.0"&gt;
  </code></pre>
  
  <p>I believe the issue is with </p>
  
  <blockquote>
    <p>h.width= u</p>
  </blockquote>
  
  <p>on line 6 and since that seems to get its value from </p>
  
  <blockquote>
    <p>window.innerWidth </p>
  </blockquote>
  
  <p>which should return a value in pixels, but for some reason, it doesn't seem to be getting that - hence the null return -. I'm using Rails 5 as well and the rest of my javascript is loaded (and called out at the bottom of the page) just fine so I'm not sure what's happening here. Any help would be greatly appreciated.  </p>