<div id="contents"></div>
body {
margin: 0;
padding: 0;
}
#contents {
width: 100vw;
height: 100vh;
}
// 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()
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.