<!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)
'html | javascript' 카테고리의 다른 글
| html javascript - input txt file (0) | 2024.08.18 |
|---|---|
| html javascript - clear canvas (0) | 2024.08.18 |
| html javascript - canvas size 화면에 꽉 채우기 (0) | 2024.08.18 |
| html javascript - date string format (1) | 2024.08.18 |
| html javascript - 코드로 string 다운로드 저장 (0) | 2024.08.18 |