HTML DOM 캔버스(Canvas) 객체 완벽 가이드 – 속성, 메서드, 실전 예제

HTML DOM의 캔버스(Canvas) 객체는 HTML5에서 새롭게 도입된 <canvas> 요소와 연관되어 있습니다. <canvas> 태그는 JavaScript를 활용해 그래픽을 그리기 위한 도구로, 그 자체는 그래픽을 담는 일종의 컨테이너 역할을 합니다. 캔버스 위에서는 선, 도형 등 다양한 그래픽 요소를 자유롭게 그릴 수 있습니다.

캔버스 객체의 주요 속성(Properties)

캔버스 객체에서 사용할 수 있는 주요 속성은 다음과 같습니다.

속성	설명
fillStyle	도형 내부를 채우는 데 사용되는 색상, 그라디언트 또는 패턴을 설정하거나 반환합니다.
strokeStyle	선(스트로크)을 그릴 때 사용되는 색상, 그라디언트 또는 패턴을 설정하거나 반환합니다.
shadowColor	그림자에 적용할 색상을 설정하거나 반환합니다.
shadowBlur	그림자의 흐림(blur) 정도를 설정하거나 반환합니다.
shadowOffsetX	도형으로부터 그림자가 떨어진 수평 거리를 설정하거나 반환합니다.
shadowOffsetY	도형으로부터 그림자가 떨어진 수직 거리를 설정하거나 반환합니다.

캔버스 객체의 주요 메서드(Methods)

캔버스 객체에서 제공하는 대표적인 메서드는 아래와 같습니다.

메서드	설명
createLinearGradient()	선형(linear) 그라디언트를 생성합니다.
createPattern()	지정된 요소를 특정 방향으로 반복하여 패턴을 생성합니다.
createRadialGradient()	원형(radial) 그라디언트를 생성합니다.
addColorStop()	그라디언트 내에서 색상이 전환되는 지점(offset)과 색상을 지정합니다.

문법(Syntax)

캔버스 객체를 생성하는 기본 문법은 다음과 같습니다.

var x = document.createElement("CANVAS");

예제(Example)

이제 HTML DOM 캔버스 객체를 활용한 실제 예제를 살펴보겠습니다. 아래 코드는 버튼을 클릭하면 초록색 원이 그려진 캔버스를 동적으로 생성하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    canvas {
        border: 1px double blue;
        margin: 1em;
    }
</style>
</head>
<body>
<h1>CANVAS</h1>
<button onclick="createCanvas()">CREATE</button>
<p>위 버튼을 클릭하면 초록색 원이 포함된 CANVAS 요소가 생성됩니다.</p>
<script>
    function createCanvas() {
        var x = document.createElement("CANVAS");
        var ctx = x.getContext("2d");
        ctx.fillStyle = "#C7EA46";
        ctx.beginPath();
        ctx.arc(100, 75, 50, 0, 2 * Math.PI);
        ctx.fill();
        ctx.stroke();
        document.body.appendChild(x);
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM 캔버스(Canvas) 객체 완벽 가이드 – 속성, 메서드, 실전 예제

CREATE 버튼 클릭 후:

HTML DOM 캔버스(Canvas) 객체 완벽 가이드 – 속성, 메서드, 실전 예제

예제 코드 상세 설명

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

먼저 CREATE 버튼을 생성하고, 버튼이 클릭되면 createCanvas() 함수가 실행되도록 설정했습니다.

<button onclick="createCanvas()">CREATE</button>

createCanvas() 함수는 먼저 <canvas> 요소를 동적으로 생성합니다. 이후 getContext() 메서드를 사용해 새로 생성된 캔버스의 드로잉 컨텍스트(context)를 가져옵니다. 하나의 캔버스에는 오직 하나의 컨텍스트만 연결될 수 있다는 점에 유의하세요. getContext() 메서드에 전달된 매개변수 값 "2d"는 해당 컨텍스트가 2D 도형 및 크기 등 2차원 그래픽 작업에만 사용된다는 것을 의미합니다. 그다음 fillStyle 속성으로 채우기 색상을 지정하고, beginPath() 메서드로 새로운 경로(path)를 시작합니다.

이후 arc() 메서드를 사용해 원의 좌표와 크기를 정의하고, fillStyle로 지정한 색상으로 원을 채웁니다. 마지막으로 stroke() 메서드를 호출하여 실제로 캔버스 위에 그림을 그리고, document.body의 appendChild() 메서드를 통해 생성된 캔버스를 body 요소의 자식으로 추가합니다.

function createCanvas() {
    var x = document.createElement("CANVAS");
    var ctx = x.getContext("2d");
    ctx.fillStyle = "#C7EA46";
    ctx.beginPath();
    ctx.arc(100, 75, 50, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();
    document.body.appendChild(x);
}