[노마드코더] 바닐라 JS로 그림 만들기 - drawing project(1)

https://nomadcoders.co/javascript-for-beginners-2

바닐라JS로 그림 앱 만들기 – 노마드 코더 Nomad Coders

집 만들기

1. 왼쪽 벽 -> (200, 200) 위치에서 가로 50 세로 200인 직사각형

2. 오른쪽 벽 -> (400, 200) 위치에서 가로 50 세로 200인 직사각형

3. 문 -> (300, 300) 위치에서 가로 50 세로 100인 직사각형

4. 천장(지붕과 벽 윗쪽 사이) -> (200, 200) 위치에서 가로 200 세로 20인 직사각형

5. 좌표 이동 -> (200, 200) 위치로

6. 지붕

- (200, 200) 과 (325, 100) 을 선으로 연결

- (325, 100) 과 (450, 200) 을 선으로 연결

- 연결된 부분의 영역 채워주기

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;

//1
ctx.fillRect(200, 200, 50, 200);
//2
ctx.fillRect(400, 200, 50, 200);
//3
ctx.fillRect(300, 300, 50, 100);
//4
ctx.fillRect(200, 200, 200, 20);
//5
ctx.moveTo(200, 200);
//6
ctx.lineTo(325, 100);
ctx.lineTo(450, 200);
ctx.fill();