テンプレートのjavascriptが適用されない

WEB上にあるjavascriptのテンプレートを使いたいのですが、表示されません。
https://marcbruederlin.github.io/particles.js/
このように表示さえたいのですが、なぜ表示されないかが分かりません。

わかる方いらっしゃったら教えてください。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta http-equiv="content-type" charset="utf-8">
5    <link rel="stylesheet" href="/java.css">
6    
7</head>
8</head>
9<body>
10  <div class="container">
11    <div class="box">
12      <h1>particles.js Demo</h1>
13      <p><a href="https://marcbruederlin.github.io/particles.js/">Website</a></p>
14    </div>
15  </div>
16  
17  
18  <canvas class="background"></canvas>
19  <script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js"></script>
20</body>
21</html>
22

CSS
1@import url('https://fonts.googleapis.com/css?family=Merienda');
2
3.background {
4  position: absolute;
5  display: block;
6  top: 0;
7  left: 0;
8  z-index: 0;
9}
10
11/* Default Styling */
12body {
13  font-family: 'Merienda', cursive;
14  background: #000;
15}
16.container {
17  display: flex;
18  justify-content: center;
19  align-items: center;
20  height: 100vh;
21}
22.box {
23  background: #fff;
24  border-radius: 5px;
25  padding: 20px;
26  text-align: center;
27  position: absolute;
28  z-index: 1;
29}
30a {
31  color: #0bd;
32}

Javascript
1window.onload = function() {
2  Particles.init({
3    selector: '.background',
4    sizeVariations: 30,
5    color: [
6      '#0bd', 'rgba(0,187,221,.5)', 'rgba(0,187,221,.2)'
7    ]
8  });
9};

行動規範の内容に同意します

回答1件

ベストアンサー

質問に提示されているJavaScriptがHTML内のどこにもありません。
.jsもしくは<script>タグでparticles.min.jsの後に記載すると下記のようになりました。

投稿2021/08/28 01:40

m.ts10806

総合スコア80861

hosoe

2021/08/28 01:57

<canvas class="background"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js"></script> <script>window.onload = function() { Particles.init({ selector: '.background', sizeVariations: 30, color: [ '#0bd', 'rgba(0,187,221,.5)', 'rgba(0,187,221,.2)' ] }); };</script> このように記載しましたら表示されました！ありがとうございます！背景が白いままなのですが、同じコードなのに差が出るのはなぜでしょうか？