Javascriptで画面を作るに当たって、canvasという物をを使用して作ることができます。

##Canvasって何？

https://developer.mozilla.org/ja/docs/Web/API/Canvas_API

Canvas API は JavaScript と HTML の要素によってグラフィックを描く方法を提供します。他にも、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などに使用することができます。
Canvas API は全体的に 2D グラフィックを対象としています。 WebGL API は、こちらも要素を使用して、ハードウェアで高速化された 2D および 3D グラフィックを描きます。

HTML

id属性をつける、値は任意で

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

JavaScript

id属性の値を指定して、canvas要素を取得
getContextというメソッドを使って、CanvasRenderingContext2Dというオブジェクトを取得する

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

こんな感じでコードを書く

CanvasRenderingContext2Dとは？

CanvasRenderingContext2D

レンダリングコンテキストは何か？これは「Canvas要素に対して文字や図形を描画するための機能」。
図形・文字・写真・その他の全ての**二次元空間で表現できる「絵」**は色のついた「点」の集合。

線も、円も「点(ピクセル)」の集合。

なので、CanvasRenderingContext2Dはその点(ピクセル)をCanvas上の自由な場所に描くことができる機能を提供してくれるということ。

自由な場所に点を打てるということは

どんな絵でもCanvas上に表現できるということです！

塗りつぶす fillRect
円を描く arc
パス(経路)を指定して線を引く stroke

などの便利なメソッドが豊富にあり、それらのメソッドを呼び出すことで複雑な図形を描画することが可能。

これらを利用し、htmlデータで画面を作成する為に、このようにコードを書き始めます。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas
      id="canvas"
      style="background-color: aqua"
      width="500"
      height="500"
    ></canvas>

すると、

このように表示されます。

#まとめ
このようにcanvasを使うことで画面を描くことができます。