描画手順

①HTMLにcanvas要素を定義

公開予定もないお試し用なので中身は簡素ですが、以下のHTMLを用意しました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

canvas要素を定義し、idとしてcanvasを付与しました。

② canvas要素への参照を取得

ここからはJSの話です。
</body>の直前に書き進めようと思います。

まず以下のようにscriptタグを追加しました。
この中にJSを追記していきます。


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

  <script>
  </script>
</body>

※以下、追加したscriptタグの内のみの記載していきます。


  const canvas = document.getElementById('canvas');

上記により、canvasの参照を取得します。

③取得した参照をもとにコンテキストを取得

コンテキストとは、線の色や太さ、影の色などのどのような描画を行うかの設定内容です。

まずは先ほど参照を取得したcanvas要素からコンテキストを取得します。


  const canvas = document.getElementById('canvas'); // canvas要素への参照の取得
  const ctx = canvas.getContext('2d'); // コンテキストの取得

２行目が追加した箇所です。getContext('2d')でコンテキストを取得しています。
引数の2dは二次元を指しています。
後ほどこのコンテキストを用いて、どういう線を引くかなどの情報を設定します。

④色や線の太さなどの情報を設定

先ほどのコンテキストにどういう線を引くかの情報を設定します。
現状は、以下のプロパティを把握できていれば問題ありません。

プロパティ	内容
strokeStyle	線や輪郭の色
fillStyle	塗りつぶしの色
lineWidth	線の幅
lineCap	線の先端部分の形状
shadowColor	影の色
shadowBlur	影のぼかし範囲

試しに設定してみます。

例)横幅3pxの赤い線を引くためのプロパティ設定


  ctx.strokeStyle = '#f00'; // 線の色
  ctx.lineWidth = 3; // 線の幅
  ctx.lineCap = 'butt'; // 線の先端の形状

線の先端の形状ですが、種類は（butt, round, square)が存在します。
それぞれの表示については、以下のサポートがわかりやすいでしょうか。
あわせてご確認ください。
> lineCap プロパティ補足情報はコチラ

⑤線や矩形の描画

先ほどどのような線を引くかのプロパティ設定を行いましたが、それだけでは実際に線を描画できません。
プロパティの表示確認は、このあとの描画を行った上で色々試すと良いと思います。

まず描画に使用するメソッドを紹介します。

メソッド	内容
beginPath()	パスの初期化
moveTo(x, y)	筆をおろす座標
lineTo(x, y)	指定座標まで筆を動かす
closePath()	筆を最初におろした位置まで筆を動かす
stroke()	筆の軌跡を線で描画
fill()	筆の軌跡の範囲内を塗りつぶす
※筆という表現が個人的にしっくりきたため、その表現を用いています。ただし、ここは個人差があるかと思いますので、しっくりこない場合は、以下のドキュメントもあわせてご確認いただけますと幸いです。
> Canvasリファレンス

試しに描画してみます。

例1)横線


  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
 
  /* コンテキストの設定 */
  ctx.strokeStyle = '#333'; // 線の色は暗め
  
  /* 描画 */
  ctx.beginPath(); // パスを初期化
  ctx.moveTo(50, 50); // x軸に50px, y軸に50px移動した箇所を開始位置として筆をおろす
  ctx.lineTo(100, 50); // x軸に100px, y軸に50px移動した箇所に筆を動かす
  ctx.stroke();

これで横棒が描画されたかと思います。
以下のようなものですね。

※lineToメソッドの時点では何も描画されないことに注意してください。最終的なstrokeメソッドで初めて描画されます。

例2)塗りつぶしなし、線だけの三角形


  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  
  /* コンテキストの設定 */
  ctx.strokeStyle = '#333'; // 線の色は暗め
  
  /* 描画 */
  ctx.beginPath(); // パスを初期化
  ctx.moveTo(50, 50); // x軸に50px, y軸に50px移動した箇所を開始位置として筆をおろす
  ctx.lineTo(100, 50); // x軸に100px, y軸に50px移動した箇所に筆を動かす
  ctx.lineTo(100, 100); // x軸に100px, y軸に100px移動した箇所に筆を動かす
  ctx.closePath(); // 最終地点(100, 100)から開始地点まで筆を動かす
  ctx.stroke(); // これまでの筆の軌跡を線として描画

これで枠線だけの三角形が描画されたかと思います。
以下のようなものですね。

また、fillメソッドを使用した場合は、以下のようになります。

  ctx.fill(); // これまでの筆の軌跡の範囲を塗りつぶし

最後

こういう投稿系はあまり経験がなく、はたしてこれで良いのかと不安な部分はありますが、気になる部分は改めて修正しつつ、とりあえず発信回数を増やしていきたいと思っています。
不束者ですが、今後ともよろしくお願いいたします。

以上、長々失礼しました。

追記

19.04.24
編集リクエストいただきまして、コード部分にシンタックスハイライトを適用しました。
ご指摘ありがとうございました！