HTML5 Canvas로 패턴 만들기 – createPattern() 메서드 완벽 가이드

HTML5 Canvas에서는 createPattern() 메서드를 사용해 이미지 기반의 반복 패턴을 손쉽게 만들 수 있습니다. 이 메서드는 지정한 이미지를 패턴으로 변환하며, 채우기 스타일(fillStyle)로 활용해 도형이나 영역을 원하는 무늬로 채울 수 있습니다.

createPattern() 메서드 문법

메서드의 기본 형태는 다음과 같습니다.

createPattern(image, repetition)

첫 번째 인수 image는 패턴으로 사용할 이미지 객체이며, 두 번째 인수 repetition은 이미지가 반복되는 방식을 결정합니다. 두 번째 인수에는 아래 네 가지 문자열 값 중 하나를 지정할 수 있습니다.

repeat – 가로와 세로 방향 모두 반복합니다(기본값).
repeat-x – 가로 방향으로만 반복합니다.
repeat-y – 세로 방향으로만 반복합니다.
no-repeat – 반복하지 않고 한 번만 그립니다.

만약 빈 문자열('')이나 null을 지정하면 repeat가 자동으로 적용됩니다.

예제 코드

아래 예제는 이미지를 불러와 패턴을 생성한 뒤, 캔버스에 150×150 크기의 사각형을 해당 패턴으로 채우는 코드입니다.

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            #test {
                width:100px;
                height:100px;
                margin: 0px auto;
            }
        </style>
        <script>
            function drawShape(){
                // DOM을 통해 canvas 요소 가져오기
                var canvas = document.getElementById('mycanvas');

                // canvas 미지원 브라우저에서는 실행하지 않음
                if (canvas.getContext){
                    // getContext로 2D 드로잉 컨텍스트 사용
                    var ctx = canvas.getContext('2d');

                    // 패턴으로 사용할 새 이미지 객체 생성
                    var img = new Image();
                    img.src = 'images/pattern.jpg';
                    img.onload = function(){
                        // 패턴 생성 후 사각형 채우기
                        var ptrn = ctx.createPattern(img,'repeat');
                        ctx.fillStyle = ptrn;
                        ctx.fillRect(0,0,150,150);
                    }
                } else {
                    alert('이 데모를 보려면 Safari 또는 Firefox 1.5+ 브라우저가 필요합니다.');
                }
            }
        </script>
    </head>
    <body id = "test" onload = "drawShape();">
        <canvas id = "mycanvas"></canvas>
    </body>
</html>

코드 설명

위 예제의 핵심 흐름은 다음과 같습니다.

document.getElementById()로 캔버스 요소를 가져옵니다.
canvas.getContext 지원 여부를 확인해 구형 브라우저에서의 오류를 방지합니다.
new Image()로 패턴에 사용할 이미지 객체를 만들고 경로를 지정합니다.
이미지 로딩이 완료되는 시점(onload)에 createPattern(img, 'repeat')를 호출해 패턴을 생성합니다.
생성된 패턴을 fillStyle에 할당하고 fillRect()로 사각형을 채웁니다.

주의사항

패턴 생성은 이미지가 완전히 로드된 이후에 수행해야 합니다. 따라서 위 예제처럼 반드시 img.onload 이벤트 핸들러 안에서 createPattern()을 호출하는 것이 좋습니다. 이미지가 로드되기 전에 패턴을 생성하면 빈 패턴이 반환되어 화면에 아무것도 표시되지 않을 수 있습니다.