HTML 캔버스(Canvas)에 그림을 그리려면 자바스크립트(JavaScript)를 사용해야 합니다. 캔버스에 그리기를 시작하기 전에 HTML DOM 메서드인 getElementById()와 getContext()를 먼저 호출해야 합니다.
캔버스에 그리는 기본 단계
캔버스에 도형이나 이미지를 그리려면 다음 순서대로 진행하면 됩니다.
- 캔버스 요소 찾기:
getElementById()메서드를 사용하여 HTML 문서에서 캔버스 요소를 가져옵니다. - 그리기 객체 얻기:
getContext()메서드를 호출하여 캔버스의 드로잉 컨텍스트를 반환받습니다. 이 객체는 실제 그리기 작업에 필요한 다양한 메서드와 속성을 제공합니다. - 그리기 실행: 컨텍스트 객체의 메서드를 활용해 캔버스 위에 원하는 도형을 그립니다.
예제 코드
아래 코드를 실행하면 자바스크립트로 캔버스에 사각형을 그리는 과정을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas</title>
</head>
<body>
<canvas id="newCanvas" width="400" height="250" style="border:2px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("newCanvas");
var ctxt = canvas.getContext("2d");
ctxt.fillStyle = "#56A7E2";
ctxt.fillRect(0,0,250,120);
</script>
</body>
</html>코드 설명
위 예제에서는 먼저 getElementById("newCanvas")로 id가 newCanvas인 캔버스 요소를 가져옵니다. 이후 getContext("2d")를 호출해 2D 드로잉 컨텍스트를 생성하고, fillStyle 속성으로 채우기 색상을 파란색 계열(#56A7E2)로 지정한 뒤, fillRect(0,0,250,120) 메서드를 통해 좌표 (0,0)에서 가로 250px, 세로 120px 크기의 사각형을 그립니다. 결과적으로 검정 테두리가 있는 캔버스 안에 파란색 사각형이 나타나게 됩니다.