HTML canvas 태그 완벽 정리 – 웹에서 그래픽 그리기 기초와 예제

HTML의 <canvas> 태그는 웹 페이지 위에 그래픽을 직접 그릴 수 있게 해주는 요소입니다. 다만 캔버스 자체는 빈 도화지 역할만 할 뿐, 실제로 도형이나 선을 그리려면 반드시 스크립트(주로 JavaScript)를 함께 사용해야 합니다. 이 태그는 HTML5에서 새롭게 도입되었으며, 캔버스의 크기를 결정하는 두 가지 속성인 height(높이)와 width(너비)를 제공합니다.

canvas 태그의 주요 속성

height – 캔버스의 높이를 픽셀(px) 단위로 지정합니다.
width – 캔버스의 너비를 픽셀(px) 단위로 지정합니다.

그럼 HTML에서 canvas 태그를 실제로 구현한 예제를 살펴보겠습니다.

예제 1: 캔버스에 사각형 그리기

<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="600" height="350" style="border: 2px solid orange;">
</canvas>
<script>
    var c = document.getElementById("newCanvas");
    var ctx = c.getContext("2d");
    ctx.shadowBlur = 20;
    ctx.shadowColor = "black";
    ctx.fillStyle = "green";
    ctx.fillRect(40, 40, 100, 250);
    ctx.shadowBlur = 30;
    ctx.shadowColor = "blue";
    ctx.fillStyle = "orange";
    ctx.fillRect(200, 40, 200, 150);
</script>
</body>
</html>

실행 결과

HTML canvas 태그 완벽 정리 – 웹에서 그래픽 그리기 기초와 예제

위 예제에서는 getContext('2d') 메서드로 2D 드로잉 컨텍스트를 얻은 뒤, fillRect()로 초록색과 주황색 사각형을 그리고 shadowBlur, shadowColor 속성으로 그림자 효과까지 적용했습니다.

이번에는 HTML5 캔버스에서 2차 곡선(quadratic curve)을 그리는 또 다른 예제를 살펴보겠습니다.

예제 2: 캔버스에 2차 곡선 그리기

<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
    width: 100px;
    height: 100px;
    margin: 0px auto;
}
</style>
<script type="text/javascript">
    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>

실행 결과

HTML canvas 태그 완벽 정리 – 웹에서 그래픽 그리기 기초와 예제

이 예제는 quadraticCurveTo() 메서드를 여러 번 연결해 부드러운 곡선 형태의 도형을 완성합니다. 페이지가 로드될 때 onload 이벤트를 통해 drawShape() 함수가 호출되며, 캔버스 미지원 브라우저를 위해 canvas.getContext 존재 여부를 먼저 확인하는 것이 좋은 습관입니다.

canvas 태그는 Chrome, Firefox, Safari, Edge 등 대부분의 최신 브라우저에서 지원되며, 인터넷 익스플로러는 9 버전부터 사용할 수 있습니다. 게임, 차트, 이미지 편집 도구 등 동적인 그래픽 처리가 필요한 웹 애플리케이션에서 폭넓게 활용되고 있으니, 기본 문법을 익혀두면 다양한 프로젝트에 응용할 수 있습니다.