html javascript - canvas size 화면에 맞추기

html | javascript

html javascript - canvas size 화면에 맞추기

zimamdero 2024. 8. 18. 12:36

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas size</title>

  <style>
    canvas {
      background-color: beige;
    }
  </style>
</head>
<body style="background-color: red" onload="init()">
  <canvas id="id-canvas"></canvas>
  <script>
    function init() {
      let canvasW = window.innerWidth - 16
      let canvasH = window.innerHeight - 21
      const canvas = document.getElementById('id-canvas')
      canvas.width = canvasW
      canvas.height = canvasH
    }
  </script>
</body>
</html>

body와 canvas 사이의 기본 설정 값 : 16 (margin left, right), 21 (margin top, bottom)