// 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, 0.8)'
  ctx.fillRect(CenterW - 210, CenterH - 110, 400, 200)

  // 輪郭描画の色指定 / 矩形の輪郭描画
  ctx.strokeStyle = 'rgba(232, 74, 95, 0.8)'
  ctx.strokeRect(CenterW - 190, CenterH - 90, 400, 200)

  // 領域の消去
  ctx.clearRect(CenterW - 170, CenterH - 70, 400, 200) 
}

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

// 初回描画
draw()