// Canvas追加
const target = document.getElementById('contents')      // 追加先
const CreateCanvas = document.createElement('canvas')   // canvas element作成
CreateCanvas.setAttribute('id', 'canvas')               // canvas に id 付与
target.appendChild(CreateCanvas)                        // 追加

function draw() {
  // 追加先のサイズ取得
  let Cwidth = target.clientWidth
  let Cheight = target.clientHeight

  // Canvas サイズ設定
  CreateCanvas.width = Cwidth
  CreateCanvas.height = Cheight               

  // Canvas・コンテキスト取得
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')

  // Canvasの中央取得
  let CenterW = Cwidth/2
  let CenterH = Cheight/2
  
  // 矩形の塗りつぶし描画
  ctx.fillStyle = 'rgba(42, 54, 59, 1)'
  ctx.beginPath()
  ctx.moveTo(CenterW - 50, CenterH + 70)
  ctx.lineTo(CenterW + 50, CenterH + 70)
  ctx.lineTo(CenterW, CenterH - 70)
  ctx.fill()

  // 輪郭描画の色指定 / 矩形の輪郭描画
  ctx.strokeStyle = 'rgba(232, 74, 95, 1)'
  ctx.beginPath()
  
  // パス生成
  for (let i = -200; i <= 200; i += 4) {
    if (i == -200) {
      ctx.moveTo(CenterW + i, CenterH + (Math.floor(Math.random() * 100) - 50))
    } else {
      ctx.lineTo(CenterW + i, CenterH + (Math.floor(Math.random() * 100) - 50))
    }
  }
  
  // 描画   
  ctx.stroke()
}

// 画面リサイズ時再描画
window.onresize = draw

// 初回描画
draw()