🌟 Canvas API

HTML5에서 새롭게 도입된 2D 그래픽 도구로,

픽셀 단위 조작을 통해 차트, 게임, 애니메이션 등을 만들 수 있다.

✅ 기본 구조

<canvas id="myCanvas" width="300" height="150"></canvas>

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d"); // 2D 그래픽을 그릴 수 있는 도구를 얻는다

---

✏️ 기본 도형

📏 선 그리기

ctx.beginPath();        // 선 그리기를 시작한다
ctx.moveTo(10, 10);     // 시작 좌표를 설정한다
ctx.lineTo(100, 100);   // 끝 좌표를 설정한다
ctx.stroke();           // 선을 실제로 그린다

⬛ 사각형 그리기

ctx.fillRect(50, 50, 100, 100);   // 채워진 사각형을 그린다
ctx.strokeRect(50, 50, 100, 100); // 테두리만 있는 사각형을 그린다
ctx.clearRect(60, 60, 20, 20);    // 해당 영역을 지운다

⚪ 원 그리기

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2); // (x, y, 반지름, 시작 각도, 끝 각도)
ctx.fill();    // 내부를 채운다
ctx.stroke();  // 테두리를 그린다

---

🎨 색상 설정

ctx.fillStyle = "skyblue";  // 내부 채우기 색상을 설정한다
ctx.strokeStyle = "blue";   // 외곽선 색상을 설정한다

---

🎨 Canvas vs CSS

항목	Canvas	CSS
목적	픽셀 단위 그래픽을 직접 그림	스타일과 레이아웃을 지정함
방식	스크립트로 동적 그리기	선언적으로 스타일 지정
장점	애니메이션, 시뮬레이션에 적합	반응형 UI에 적합
특징	그려진 후에는 요소로 접근 불가	요소 단위로 조작 가능

---

💾 Web Storage API

브라우저에서 데이터를 로컬에 저장할 수 있는 API다.

localStorage와 sessionStorage 두 가지 방식이 존재한다.

---

🆚 차이점

구분	localStorage	sessionStorage
지속성	브라우저 종료 후에도 유지된다	브라우저 종료 시 삭제된다
저장 위치	클라이언트(영구 저장)	클라이언트(임시 저장)
Same-Origin 정책	적용된다	적용된다
저장 용량	약 5MB 권장	약 5MB 권장

---

⚙️ 사용법

저장

localStorage.setItem("key", "value");

불러오기

const value = localStorage.getItem("key");

삭제

localStorage.removeItem("key");

전체 삭제

localStorage.clear();

기타 메서드

localStorage.length;       // 저장된 항목 수
localStorage.key(index);   // 특정 인덱스의 키 이름 반환

이벤트 감지

window.onstorage = function (event) {
  console.log("변경 감지:", event);
};

---

🔁 예시

// 저장
localStorage.setItem("username", "kim");

// 읽기
let name = localStorage.getItem("username");
console.log(name); // → "kim"

// 삭제
localStorage.removeItem("username");

// 전체 삭제
localStorage.clear();