HTML5画布大小可覆盖整个html页面

Question

I recently learnt JavaScript and decided to go ahead and implement a page for Github. Everything looks fine but the only problem I face is that the JS code for canvas doesn't scale the full html page, meaning the particles bounce off from the initial window and when I scroll down, that space remains devoid of any particles. I want the JS canvas to have particles all over the page. Can someone help me as to how I can go about fixing it?

TLDR: How can I fix the JS code so that the particle effect span the whole html page rather than just the initial window leaving everything else devoid?

https://devkapupara.github.io/ Relevant file: https://github.com/devkapupara/devkapupara.github.io

Answer 1

This sounds like an html/css issue, not a js issue. Even if you assign your element 100% width, the body of your template may have built in padding. Try the following:

<!-- HTML -->

<div id="my-canvas-container">
  <!-- this is where your canvas would load -->
</div>



/* CSS */

html, body {
  padding: 0;
  margin: 0;
}

#my-canvas-container {
  min-width:100%
}