HTML5 Canvas 기초 완벽 가이드 – 웹에서 그래픽 그리기

웹 페이지에 그래픽을 그리려면 HTML5의 <canvas> 요소를 사용합니다. <canvas> 요소는 JavaScript를 활용해 다양한 그래픽을 자유롭게 그릴 수 있도록 해주며, 선, 사각형, 베지어 곡선(Bezier curves) 등 복잡한 도형까지 표현할 수 있습니다.

캔버스 요소의 기본 구조

모든 캔버스는 크기를 정의하는 두 가지 속성을 가집니다. 바로 height(높이)와 width(너비)입니다.

또한 JavaScript로 캔버스를 제어하려면 아래 코드처럼 고유한 id를 지정해야 합니다.

<canvas id = "newCanvas" width = "100" height = "100"></canvas>

렌더링 컨텍스트(Rendering Context) 이해하기

먼저 getElementById() 메서드를 사용해 DOM에서 캔버스 요소를 찾아옵니다.

var canvas = document.getElementById("newCanvas");

캔버스에 무언가를 표시하려면 스크립트가 먼저 렌더링 컨텍스트에 접근한 뒤 그 위에 그리기 작업을 수행해야 합니다. <canvas> 요소는 렌더링 컨텍스트와 관련 드로잉 함수를 얻기 위한 DOM 메서드인 getContext를 제공합니다. 이 함수는 매개변수로 컨텍스트 유형을 받으며, 2D 그래픽의 경우 '2d'를 전달합니다.

예제 1: 경로(Path)를 이용한 도형 그리기

다음은 HTML5 <canvas>로 경로를 그려 스마일 얼굴을 만드는 예제입니다.

<!DOCTYPE HTML>
<html>
<head>
<style>
    #test {
        width: 100px;
        height:100px;
        margin: 0px auto;
        background-color: orange;
    }
</style>
<script>
    function drawShape() {
        // DOM으로 캔버스 요소 가져오기
        var canvas = document.getElementById('mycanvas');
        // 캔버스 미지원 브라우저 대비 예외 처리
        if (canvas.getContext) {
            // getContext로 2D 드로잉 컨텍스트 사용
            var ctx = canvas.getContext('2d');
            // 도형 그리기
            ctx.beginPath();
            ctx.arc(75,75,50,0,Math.PI*2,true); // 외부 원
            ctx.moveTo(110,75);
            ctx.arc(75,75,35,0,Math.PI,false); // 입
            ctx.moveTo(65,65);
            ctx.arc(60,65,5,0,Math.PI*2,true); // 왼쪽 눈
            ctx.moveTo(95,65);
            ctx.arc(90,65,5,0,Math.PI*2,true); // 오른쪽 눈
            ctx.stroke();
        } else {
            alert('이 데모를 보려면 Safari 또는 Firefox 1.5+ 브라우저가 필요합니다.');
        }
    }
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.

HTML5 Canvas 기초 완벽 가이드 – 웹에서 그래픽 그리기

예제 2: 2차 곡선(Quadratic Curve) 그리기

이번에는 quadraticCurveTo() 메서드를 활용해 부드러운 곡선으로 이루어진 도형을 그려보겠습니다.

<!DOCTYPE HTML>
<html>
<head>
<style>
    #test {
        width: 100px;
        height:100px;
        margin: 0px auto;
    }
</style>
<script type>
    function drawShape() {
        // DOM으로 캔버스 요소 가져오기
        var canvas = document.getElementById('mycanvas');
        // 캔버스 미지원 브라우저 대비 예외 처리
        if (canvas.getContext) {
            // getContext로 2D 드로잉 컨텍스트 사용
            var ctx = canvas.getContext('2d');
            // 도형 그리기
            ctx.beginPath();
            ctx.moveTo(75,25);
            ctx.quadraticCurveTo(25,25,25,62.5);
            ctx.quadraticCurveTo(25,100,50,100);
            ctx.quadraticCurveTo(50,120,30,125);
            ctx.quadraticCurveTo(60,120,65,100);
            ctx.quadraticCurveTo(125,100,125,62.5);
            ctx.quadraticCurveTo(125,25,75,25);
            ctx.stroke();
        } else {
            alert('이 데모를 보려면 Safari 또는 Firefox 1.5+ 브라우저가 필요합니다.');
        }
    }
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 곡선 도형이 화면에 나타납니다.

HTML5 Canvas 기초 완벽 가이드 – 웹에서 그래픽 그리기

정리

HTML5 Canvas는 <canvas> 요소 정의, getElementById()로 요소 접근, getContext('2d')로 렌더링 컨텍스트 확보의 세 단계만 기억하면 됩니다. 이후 arc(), moveTo(), quadraticCurveTo() 등 다양한 드로잉 API를 조합하면 원, 곡선, 복잡한 일러스트까지 자유롭게 구현할 수 있습니다.