趣味でcodepenを見ているうちに「私もJavaScriptでお絵描きしたいなぁ・・」と考えるようになりました。

このコード、どうやって書いているんだろう、とコードリーディングして「なるほど、わからん」とつまづきながら少しずつ理解したりしていなかったりしています。

そんな時、いつもスルーしていたソースコードがありました。
それが表題のHTMLが空のものになります。

canvas要素の表示方法

<canvas id="canvas"></canvas>

しか知らなかった私は、「HTMLがないからきっと特殊な方法で表示させているんだろう（？）」といつも見なかったことにしていました。

友人もThree.js等のWEB表現に興味を持ち始めたことをきっかけに、このようなコードはどのように実装したらいいのか質問されました。

最初にdotの大きさやspeedを定義して、for文で繰り返しして描画しているという説明をしました。しかし、HTMLでどう表示させているかわからないと言われました。「それ、いつも私が思ってるやつやん！」と思い、有識者の方に質問し、勉強させていただきました。

実装について

「このソースコードだと54行目からDOMでcanvasを作っているため、HTMLの記述がありません。

  canvas = document.createElement('canvas');
  c = canvas.getContext('2d');
  canvas.width = screenWidth;
  canvas.height = screenHeight;
  document.body.appendChild(canvas);

blobsは読み込んだpngをベースに動かしています。」とご回答をいただきました。

完全に見落としというかもはや見てなかったのですが、「ここでDOMを使うのか！」と勉強になりました。

より理解するために詳しく説明します。
DOMとはJavaScriptでHTML要素を操作する仕組みで、createElementでHTMLにcanvas要素を作っています。
c = は　const ctx とかconst cでも書き換え可能(再代入するときはletになる）で変数を定義している部分で、canvas.getContext（"2d")で2D要素を取得しています。

.widthと.heightの部分は描画部分の幅と高さを定義しています。
16、17行目にscreenWidthとscreenHeightが定義されていますね。これを代入しています。

.body.appendChild(canvas);でbodyの末尾にcanvasを追加しているため、ブラウザで表示されています。

またcodepen上で見ると、headがないのでどうやって読み込んでいるのか疑問に思うかもしれません。（私は思いました）

headは読み込まれてSettingsからheadの編集をすることもできます。

そのため、appendChild以下にfillStyleやbeginPath等描画に関することを記述すれば表示されます。

まとめ

DOMという初歩的なことでしたが、備忘録として記事を書きました。
特に技術的なことは「なるほど、わからん」が多いのでこのように1つずつ紐解いていくことが重要だと改めて感じました。

「なるほど、わからん」が少しでもわかるようになればいいなと思う毎日です。

引き続き、Three.jsとかcanvasなどのWEB表現を理解してたくさん遊んだり表現していきたいです。

PS.Arakiさん、質問させていただきありがとうございました！！