HTML Canvas 그리기
캔버스에서 그리기 위해 JavaScript 사용
HTML 캔버스에서의 모든 그리기는 JavaScript를 사용하여 완성되어야 합니다：
예제
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
제 1 단계: Canvas 요소 찾기
먼저, <canvas> 요소를 찾아야 합니다。
이는 HTML DOM 메서드 getElementById()를 사용하여 완성됩니다：
const canvas = document.getElementById("myCanvas");
제 2 단계: 그리기 오브젝트 생성
또한, 그리기 오브젝트가 필요합니다。
getContext()는 그리기에 사용할 속성과 메서드를 제공하는 내장 HTML 오브젝트입니다：
const ctx = canvas.getContext("2d");
제 3 단계: 캔버스에서 그리기
마지막으로, 캔버스에서 그리기 시작할 수 있습니다。
그래픽 오브젝트의 채우기 스타일을 빨간색으로 설정합니다：
ctx.fillStyle = "#FF0000";
fillStyle 속성은 CSS 색상, 그레이딩 또는 패턴일 수 있습니다. 기본 fillStyle는 검은색입니다。
fillRect(x,y,width,height) 메서드는 캔버스에서 직사각형을 그리며, 채우기 스타일로 채웁니다：
ctx.fillRect(0, 0, 150, 75);
