title: Bootsrap nav-link does not navigate to the assigned ID in HTML after using canvas tag
body: <p>When I used canvas element the Bootstrap nav-link did not navigate to the assigned ID. But when I replaced canvas with div, the nav-link was working but the graph did not load.</p>
  
  <p>Here is the link to my website: <a href="https://covidupdate.netlify.com/" rel="nofollow noreferrer">https://covidupdate.netlify.com/</a></p>
  
  <pre><code>
      &lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
              &lt;nav class="navbar navbar-light bg-light"&gt;
                  &lt;span class="navbar-brand mb-0 h1"&gt;COVID-19: India Stats&lt;/span&gt;
              &lt;/nav&gt;
              &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                  aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
                  &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
  
              &lt;div class="collapse navbar-collapse flex-grow-1 text-right" id="navbarSupportedContent"&gt;
                  &lt;ul class="navbar-nav ml-auto flex-nowrap"&gt;
                      &lt;li class="nav-item active"&gt;
                          &lt;a class="nav-link" href="#summary-total"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item active"&gt;
                          &lt;a class="nav-link" href="#table-state-data"&gt;State-wise Stats&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item active"&gt;
                          &lt;a class="nav-link" href="#trends"&gt;Spread Trends&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item active"&gt;
                          &lt;a class="nav-link" href="#helpline"&gt;Helpline&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item active"&gt;
                          &lt;a class="nav-link" href="#helpful-links"&gt;Helpful Links&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  
  </code></pre>
  
  <pre><code>&lt;div id="trends" class="w-90-95"&gt;
              &lt;h3 class="text-center padding"&gt;Spread Trends&lt;/h3&gt;
              &lt;ul class="nav nav-tabs" id="myTab" role="tablist"&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link active" id="cumulative-tab" data-toggle="tab" href="#cumulative" role="tab"
                          aria-controls="cumulative" aria-selected="true"&gt;Cumulative&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" id="daily-tab" data-toggle="tab" href="#daily" role="tab" aria-controls="daily"
                          aria-selected="false"&gt;Daily&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class="tab-content" id="myTabContent"&gt;
                  &lt;div class="tab-pane fade show active" id="cumulative" role="tabpanel" aria-labelledby="cumulative-tab"&gt;
                      &lt;canvas class="padding canvasred" id="confirmedCasesCumulative"&gt;&lt;/canvas&gt;
                      &lt;canvas class="padding canvasgreen" id="recoveredCumulative"&gt;&lt;/canvas&gt;
                      &lt;canvas class="padding canvasgrey" id="deathsCumulative"&gt;&lt;/canvas&gt;
                  &lt;/div&gt;
                  &lt;div class="tab-pane fade" id="daily" role="tabpanel" aria-labelledby="daily-tab"&gt;
                      &lt;canvas class="padding canvasred" id="confirmedIncreaseDaily"&gt;&lt;/canvas&gt;
                      &lt;canvas class="padding canvasgreen" id="recoveredDaily"&gt;&lt;/canvas&gt;
                      &lt;canvas class="padding canvasgrey" id="deathsDaily"&gt;&lt;/canvas&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <pre><code>
  
    [1]: https://covidupdate.netlify.com/
  </code></pre>