Canvas API
Baseline: Widely available (널리 사용 가능)
✅ Chrome ✅ Edge ✅ Firefox ✅ Safari
이 기능은 잘 확립되어 있고 많은 기기와 브라우저 버전에서 작동해요. 2015년 7월부터 브라우저 전반에서 사용할 수 있게 됐어요.
Canvas API는 JavaScript와 HTML <canvas> 요소를 통해 그래픽을 그릴 수 있는 수단을 제공해요. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작, 실시간 비디오 처리에 사용될 수 있어요.
Canvas API는 주로 2D 그래픽에 초점을 맞추고 있어요. <canvas> 요소를 사용하는 WebGL API는 하드웨어 가속 2D 및 3D 그래픽을 그려요.
💡 강사 팁: Canvas API는 웹에서 그래픽을 그릴 수 있는 정말 강력한 도구예요! 브라우저에서 직접 픽셀 단위로 그림을 그릴 수 있어서 활용도가 엄청나게 높답니다.
Canvas vs SVG 선택 가이드:
- Canvas를 사용하세요: 픽셀 조작이 필요할 때, 게임처럼 많은 객체가 빠르게 움직일 때, 이미지 필터링/편집, 차트 그래픽
- SVG를 사용하세요: 확대/축소해도 선명해야 할 때, 개별 요소에 이벤트 리스너가 필요할 때, 복잡한 벡터 그래픽
제가 실무에서 Canvas를 자주 사용했던 사례들:
데이터 시각화: Chart.js, D3.js 같은 라이브러리들이 내부적으로 Canvas를 사용해요. 수천 개의 데이터 포인트를 실시간으로 표시할 때 SVG보다 훨씬 빠르죠.
이미지 편집: 필터 적용, 크롭, 리사이징 같은 작업을 클라이언트 사이드에서 처리할 수 있어요. 서버로 원본 이미지를 보내기 전에 미리 처리할 수 있어서 대역폭을 절약할 수 있답니다.
게임 개발: 간단한 2D 게임은 Canvas만으로도 충분해요. 저는 학습용 브라우저 게임을 만들 때 자주 사용했어요.
시그니처 패드: 전자 서명을 받을 때 Canvas의 마우스/터치 이벤트를 활용해서 구현했어요.
주의할 점:
- Canvas는 즉시 모드(immediate mode)로 작동해요. 한번 그린 건 "객체"로 남지 않고 그냥 픽셀이 되어버려요. 나중에 수정하려면 전체를 지우고 다시 그려야 해요.
- 고해상도(Retina) 디스플레이에서는
devicePixelRatio를 고려해야 선명하게 보여요. 이거 놓치면 흐릿하게 보입니다!- 성능을 위해서는
requestAnimationFrame()을 사용하고, 필요한 부분만 다시 그리는 최적화가 중요해요.WebGL과의 차이:
Canvas API는 2D에 특화되어 있고 배우기 쉬워요. 3D나 복잡한 그래픽 효과가 필요하다면 WebGL을 사용하세요. WebGL은 GPU를 직접 활용해서 훨씬 빠르지만, 러닝 커브가 가파르답니다. Three.js 같은 라이브러리를 사용하면 WebGL을 좀 더 쉽게 다룰 수 있어요!
안녕하세요! 이번에 공부하실 내용은 프론트엔드 개발에서 화려한 시각적 효과를 담당하는 핵심 기술, 바로 Canvas API군요. 직접 픽셀 단위로 그래픽을 다룰 수 있게 해주는 기능이라, 준비 중이신 포트폴리오 웹 프로필 사이트에 인터랙티브하고 동적인 배경 효과를 주거나, 독후감 사이트의 통계 차트를 직접 그릴 때 아주 유용하게 활용할 수 있는 매력적인 API랍니다.
영어 문서를 꼼꼼하게 번역하면서, 개발 실무에서 직접 쓰이는 프레임워크와 연관 지어 이해하기 쉽도록 강사의 꿀팁까지 듬뿍 담아 설명해 드릴게요!
기본 예제 (Basic example)
이 간단한 예제는 캔버스(canvas)라는 도화지 위에 초록색 직사각형을 그리는 방법을 보여줍니다.
HTML
<canvas id="canvas"></canvas>💡 강사의 실무 팁:
HTML에서는 위처럼 단순히<canvas>태그를 사용합니다. 하지만 실제 리액트(React)나 넥스트제이에스(Next.js) 환경에서 개발하실 때는getElementById같은 직접적인 DOM 탐색보다는,useRef훅(Hook)을 사용하여<canvas ref={canvasRef}></canvas>형태로 캔버스 요소에 접근하는 패턴을 훨씬 더 많이 사용하게 되니 참고해 두세요!
JavaScript
자바스크립트의 Document.getElementById() 메서드는 HTML의 <canvas> 요소에 대한 참조(reference)를 가져옵니다. 그 다음, HTMLCanvasElement.getContext() 메서드를 통해 해당 요소의 '컨텍스트(context)'를 가져오게 되는데요. 이 컨텍스트가 바로 우리가 실제로 그림을 렌더링(그리기)할 실질적인 도화지 영역이라고 생각하시면 됩니다.
실제 그림 그리는 작업은 CanvasRenderingContext2D 인터페이스를 사용하여 이루어집니다. fillStyle 속성은 우리가 그릴 직사각형을 초록색(green)으로 채우도록 설정해 줍니다. 그리고 fillRect() 메서드를 실행하면, 직사각형의 좌측 상단 모서리를 (10, 10) 좌표에 위치시키고, 너비 150 유닛(픽셀), 높이 100 유닛 크기의 도형을 화면에 딱 배치하게 됩니다.
💡 강사의 핵심 보충 설명:
캔버스의 좌표계를 이해하는 것이 정말 중요합니다! 우리가 학교 수학 시간에 배웠던 데카르트 좌표계와는 다르게, 웹 캔버스의 좌표계는 좌측 상단 모서리가 원점(0, 0)입니다. x축은 오른쪽으로 갈수록 커지고, y축은 아래로 내려갈수록 커진다는 사실을 꼭 기억하세요!
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);결과 (Result)
(MDN 사이트 내에서 위 코드가 실제로 실행되어 초록색 사각형이 그려진 결과를 보여주는 영역입니다.)
참고 자료 (Reference)
Canvas API를 다루기 위해 알아두어야 할 주요 인터페이스(객체)들입니다.
HTMLCanvasElementCanvasRenderingContext2DCanvasGradientCanvasPatternImageBitmapImageDataTextMetricsOffscreenCanvasPath2D(실험적인 기능입니다. 향후 동작 방식이 변경될 수 있으니 주의하세요.)ImageBitmapRenderingContext(실험적인 기능입니다. 향후 동작 방식이 변경될 수 있으니 주의하세요.)
참고: >
WebGLRenderingContext와 관련된 3D 그래픽 인터페이스들은 WebGL 문서에서 참조하실 수 있습니다.
참고: > 화면에 보이지 않는 백그라운드에서 렌더링을 처리하는
OffscreenCanvas는 웹 워커(Web Workers) 환경에서도 사용할 수 있습니다! (이전 시간에 배우셨던 워커 관련 내용과 찰떡궁합인 인터페이스죠.)
이 외에도 캔버스 요소를 스트리밍 데이터로 변환할 때 쓰이는 CanvasCaptureMediaStreamTrack이라는 관련 인터페이스도 있습니다.
가이드 및 튜토리얼 (Guides and tutorials)
Canvas 튜토리얼 (Canvas tutorial)Canvas API의 기본적인 사용법부터 고급 기능까지 모두 아우르는 종합적인 튜토리얼 문서입니다.
HTML5 Canvas 깊게 파보기 (HTML5 Canvas Deep Dive)Canvas API와 WebGL에 대한 실습 위주의 책 분량 소개 자료입니다.
Canvas 핸드북 (Canvas Handbook)Canvas API를 다룰 때 간편하게 찾아볼 수 있는 유용한 레퍼런스(참고서)입니다.
캔버스를 사용해 비디오 조작하기 (Manipulating video using canvas)<video> 태그와 <canvas> 요소를 결합하여 비디오 데이터를 실시간으로 다루는 방법을 배웁니다.
라이브러리 (Libraries)
Canvas API는 굉장히 강력하지만, 순수(Vanilla) API만으로 모든 것을 구현하기엔 사용법이 항상 간단하지만은 않습니다. 아래 나열된 라이브러리들을 활용하면 캔버스 기반의 프로젝트를 훨씬 더 빠르고 쉽게 만들 수 있습니다.
- EaselJS : 게임, 제너러티브 아트(generative art), 기타 고도의 그래픽 경험을 쉽게 만들 수 있게 해주는 오픈소스 캔버스 라이브러리입니다.
- Fabric.js : SVG 파싱(해석) 기능을 갖춘 강력한 오픈소스 캔버스 라이브러리입니다.
- heatmap.js : 캔버스를 기반으로 데이터 히트맵(열 분포도)을 생성하기 위한 오픈소스 라이브러리입니다.
- JavaScript InfoVis Toolkit : 대화형 데이터 시각화 자료를 만들어줍니다.
- Konva.js : 데스크탑 및 모바일 애플리케이션을 위한 2D 캔버스 라이브러리입니다.
- p5.js : 아티스트, 디자이너, 교육자 및 초보자를 위한 전체 캔버스 그리기 기능 세트를 갖춘 친화적인 라이브러리입니다.
- Phaser : Canvas 및 WebGL 기반의 브라우저 게임을 만들기 위한 빠르고 재미있는 무료 오픈소스 프레임워크입니다.
- Pts.js : 캔버스와 SVG 환경에서 창의적인 코딩과 시각화를 하기 위한 라이브러리입니다.
- Rekapi : Canvas를 위한 애니메이션 키프레임 제어 API입니다.
- Scrawl-canvas : 2D 캔버스 요소를 생성하고 조작하기 위한 오픈소스 자바스크립트 라이브러리입니다.
- ZIM : 캔버스 위에서 창의적인 코딩을 할 수 있도록 편리한 기능, 컴포넌트, 컨트롤을 제공하는 프레임워크입니다. 접근성 기능과 수백 개의 다채로운 튜토리얼을 포함하고 있습니다.
- Sprig : 초보자 친화적이고 Canvas를 사용하는 타일 기반의 오픈소스 게임 개발 라이브러리입니다.
참고:
WebGL을 사용하는 2D 및 3D 라이브러리를 확인하시려면 WebGL API 문서를 참고해 주세요.
💡 강사의 실무 팁:
순수 Canvas API로 상태(State)와 컴포넌트(Component)를 연결해 화면을 다시 그리는 과정은 코드가 상당히 복잡해집니다. 그래서 리액트 개발 생태계에서는 위의 라이브러리 목록에 있는Konva.js를 리액트용으로 감싼react-konva라는 라이브러리를 정말 많이 사용해요! 마치 HTML 태그를 쓰듯 선언적으로 도형을 그릴 수 있어서, 컴포넌트 주도 개발(CDD)과 궁합이 아주 좋답니다.
