캔버스 요소

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.

1. 개요
2. 역사
3. 사용법
- 3.1. 캔버스 API
- 3.2. 캔버스 요소 크기와 그리기 표면 크기
4. 예제
- 4.1. HTML 코드
- 4.2. 자바스크립트 코드
5. 브라우저 지원
6. SVG와의 비교
7. 개인 정보 보호 문제
참조

1. 개요

캔버스 요소는 HTML 코드 내에서 그래픽을 그릴 수 있는 영역으로, 2004년 애플에 의해 처음 도입되었다. 자바스크립트를 사용하여 캔버스에 그림을 그릴 수 있으며, 그래프, 애니메이션, 게임, 이미지 합성 등 다양한 용도로 활용된다. 캔버스 API는 상태 관리, 변형, 합성, 색상, 라인 스타일 등 다양한 드로잉 기능을 제공하며, 캔버스 요소의 크기와 그리기 표면의 크기를 설정할 수 있다. 캔버스는 래스터 기반으로, SVG와 비교하여 즉시 모드로 그려지며, 캔버스 핑거프린팅과 같은 개인 정보 보호 문제도 존재한다.

더 읽어볼만한 페이지

HTML 태그 - HTML 요소
HTML 요소는 HTML 문서의 기본 단위로서, 시작 태그와 종료 태그, 그리고 콘텐츠를 포함하며, 일반 요소, 원시 텍스트 요소, 빈 요소로 나뉘고 콘텐츠 범주에 따라 포함 가능한 콘텐츠 종류가 결정된다.
HTML 태그 - 폼 (HTML)
HTML 폼은 웹 페이지에서 사용자로부터 정보를 수집하여 서버로 전송하는 요소로, 텍스트 입력, 체크 상자, 라디오 버튼 등 다양한 컨트롤을 제공하여 사용자 인터랙션을 가능하게 한다.
HTML5 - 구글 스위피
구글 스위피는 구글에서 개발한 웹 서비스로, SWF 파일을 JSON으로 직렬화한 후 자바스크립트를 통해 SVG로 변환하여 애니메이션을 구현하는 기술이었으나 2016년 7월 1일 서비스가 종료되었다.
HTML5 - 웹 스토리지
웹 스토리지는 웹 브라우저에서 클라이언트 측에 데이터를 저장하는 API로, 쿠키와 유사하지만 더 큰 저장 용량을 제공하며 로컬 스토리지와 세션 스토리지로 구분된다.

캔버스 요소
기본 정보
종류	인라인 요소
내용 모델	투명
허용된 콘텐츠	투명. 그러나 `canvas` 요소가 스크립팅 캔버스인 경우, 요소는 캔버스에 이미지 데이터를 렌더링하는 알고리즘을 나타내는 스크립트도 포함해야 한다.
태그 생략	시작 태그와 종료 태그가 모두 필요하다.
허용된 부모 요소	흐름 콘텐츠, 구문 콘텐츠. `noscript` 요소 내에 포함되어서는 안 된다.
DOM 인터페이스	HTMLCanvasElement
속성
일반 속성	전역 속성
특성 속성	`height` `width`

2. 역사

애플이 2004년에 macOS 웹킷 구성 요소 안에 사용할 목적으로 캔버스를 처음 도입하였으며,^[24] 대시보드 위젯과 사파리 브라우저와 같은 응용 프로그램들의 기능을 강화하는데 사용되었다. 2005년에 버전 1.8의 게코 브라우저,^[25] 2006년에는 오페라^[26]에 채택되었고, WHATWG에 의해 표준화되었다.

2. 1. 초기 도입과 발전

애플이 2004년에 자사의 macOS 웹킷 구성 요소 안에 사용할 목적으로 캔버스를 처음 도입하였으며,^[24] 대시보드 위젯과 사파리 브라우저와 같은 응용 프로그램들의 기능을 강화하는데 사용되었다. 나중에 2005년에 버전 1.8의 게코 브라우저에 채택되었으며,^[25] 오페라에는 2006년 채택되었고,^[26] 차세대 웹 기술의 신규 제안 사양으로 WHATWG에 의해 표준화되었다.

2. 2. 추가 API 및 Level 2

2009년 여름 경 문자열 렌더링 API와 픽셀 조작 API가 웹 브라우저에 구현되었다.

이후 HTML Canvas 2D Context, Level 2가 만들어져, 2012년 12월 17일^[18]에 첫 번째 W3C Working Draft가 발표되었다. imageSmoothingEnabled를 통해 이미지 스무딩을 비활성화하거나, CanvasWindingRule을 지정하거나, 파선을 그릴 수 있게 되었다.

2. 3. 지적 재산권 분쟁

2007년 3월 14일, WebKit 개발자 데이브 하얏트는 애플의 수석 특허 변호사 헬렌 플로트카 워크맨으로부터 이메일을 받았다.^[6] 이 이메일에는 애플이 2005년 3월 24일자 WHATWG의 웹 애플리케이션 1.0 워킹 드래프트의 "그래픽: 비트맵 캔버스" 섹션 10.1에 관련된 모든 지적 재산권을 보유하고 있다는 내용이 담겨 있었다.^[7] 다만, 이 사양이 특허 정책이 있는 표준 기구로 이전될 경우 특허 라이선스를 제공할 수 있다는 여지를 남겼다.

이러한 애플의 주장은 웹 개발자들 사이에서 큰 논쟁을 불러일으켰다. 월드 와이드 웹 컨소시엄(W3C)이 로열티 없는 라이선스를 선호하는 것과 달리, WHATWG에는 특허 정책이 없다는 점이 문제로 제기되었다. 결국 애플은 W3C의 로열티 없는 특허 라이선스 조건에 따라 해당 특허를 공개했다.^[8] 이로써 캔버스 요소가 HTML 워킹 그룹이 만든 미래의 W3C 권고안에 포함될 때마다 애플은 해당 특허에 대한 로열티 없는 라이선스를 제공해야 한다.^[9]

3. 사용법

캔버스는 HTML 코드에서 `width`와 `height` 속성으로 정의된 그릴 수 있는 영역이다. 자바스크립트 코드는 다른 일반적인 2D API와 유사한 전체 드로잉 함수 집합을 통해 이 영역에 접근하여 동적으로 생성된 그래픽을 가능하게 한다. 캔버스의 예상 사용 사례로는 그래프 작성, 애니메이션, 게임 및 이미지 합성이 있다.^[1]

다음은 HTML 문서에서 캔버스 요소를 만드는 코드이다:

```html

```

다음은 자바스크립트를 사용하여 캔버스를 그리는 코드이다:

```javascript

var example = document.getElementById('example');

var context = example.getContext('2d');

context.fillStyle = 'red';

context.fillRect(30, 30, 50, 50);

```

위 코드는 화면에 빨간 사각형을 그린다.

3. 1. 캔버스 API

캔버스 API는 상태 관리, 변형, 합성, 색상과 스타일, 라인 캡과 조인트, 그림자, 사각형, 경로, 포커스 관리, 문자열, 픽셀 조작, 이미지 변환 등으로 구성되어 있다. `canvas`는 HTML 코드에서 ''높이''와 ''너비'' 속성으로 정의된 그릴 수 있는 영역으로 구성된다. JavaScript 코드는 다른 일반적인 2D API와 유사한 전체 드로잉 함수 집합을 통해 이 영역에 접근하여 동적으로 생성된 그래픽을 가능하게 한다. 캔버스의 예상 사용 사례로는 그래프 작성, 애니메이션, 게임 및 이미지 합성이 있다. 캔버스와 상호 작용하려면 캔버스의 렌더링 컨텍스트를 가져와야 하며, 이는 캔버스 API, WebGL, 또는 WebGL2 렌더링 컨텍스트를 사용할지 여부를 결정한다. 캔버스 API는 캔버스 컨텍스트의 모든 속성을 저장하고 복원하기 위해 `save()`와 `restore()`도 제공한다.^[1]

3. 2. 캔버스 요소 크기와 그리기 표면 크기

캔버스는 실제로 두 가지 크기를 갖는다. 바로 요소 자체의 크기와 요소의 그리기 표면 크기이다. 요소의 너비와 높이 속성을 설정하면 이 두 가지 크기가 모두 설정된다. CSS 속성은 요소의 크기에만 영향을 미치며 그리기 표면에는 영향을 미치지 않는다.

기본적으로 캔버스 요소의 크기와 그리기 표면의 크기는 모두 가로 300 픽셀, 세로 150 픽셀이다. CSS를 사용하여 캔버스 요소의 크기를 설정하면, 요소의 크기는 가로 600 픽셀, 세로 300 픽셀이지만, 그리기 표면의 크기는 기본값인 300 픽셀 × 150 픽셀로 변경되지 않는다. 캔버스 요소의 크기가 그리기 표면의 크기와 일치하지 않으면 브라우저는 그리기 표면을 요소에 맞게 조정한다. (이로 인해 예상치 못한 원치 않는 효과가 발생할 수 있다.)

캔버스 요소에는 width와 height라는 속성이 있으며, HTML 내에서 그릴 수 있는 영역이 된다. 자바스크립트 코드를 통해 해당 영역 안에 다른 일반적인 2차원 API와 유사한 API를 통해 그림을 그릴 수 있다.

4. 예제

다음은 HTML 문서에 캔버스 요소를 만드는 예제 코드이다.

```html

```

자바스크립트를 사용하여 캔버스에 그림을 그릴 수 있다. 아래 코드는 화면에 빨간색 사각형을 그리는 예제이다.

```javascript

var example = document.getElementById('example');

var context = example.getContext('2d');

context.fillStyle = 'red';

context.fillRect(30, 30, 50, 50);

```

캔버스 API는 `save()`와 `restore()`를 사용하여 캔버스 컨텍스트의 모든 속성을 저장하고 복원할 수 있다.^[1]

4. 1. HTML 코드

html

```

자바스크립트를 사용하여 캔버스에 그릴 수 있다.

```javascript

var example = document.getElementById('example');

var context = example.getContext('2d');

context.fillStyle = 'red';

context.fillRect(30, 30, 50, 50);

```

이 코드는 화면에 빨간 사각형을 그린다.

캔버스 API는 캔버스 컨텍스트의 모든 속성을 저장하고 복원하기 위해 `save()`와 `restore()`도 제공한다.

4. 2. 자바스크립트 코드

javascript

const example = document.querySelector('#example');

const context = example.getContext('2d');

context.fillStyle = "red";

context.fillRect(30, 30, 50, 50);

```

이 코드는 화면에 빨간색 사각형을 그린다.^[1]

캔버스 API는 캔버스 컨텍스트의 모든 속성을 저장하고 복원하기 위해 `save()`와 `restore()`도 제공한다.^[1]

5. 브라우저 지원

현재 버전의 모질라 파이어폭스, 구글 크롬, 인터넷 익스플로러, 사파리, 캉커러, 오페라^[27], 마이크로소프트 에지에서 지원된다.^[28] 인터넷 익스플로러 9 이상에서는 네이티브로 구현되어 있으며, 인터넷 익스플로러 8 및 이전 버전에서는 네이티브 구현이 되지 않았지만, 이를 지원하기 위한 외부 라이브러리가 있다.

[http://excanvas.sourceforge.net/ ExplorerCanvas] - VML
[http://flashcanvas.net/ FlashCanvas Pro] - 어도비 플래시
[https://code.google.com/archive/p/uupaa-js-spinoff/ uuCanvas.js] - 플래시, 실버라이트

6. SVG와의 비교

SVG는 브라우저에서 도형을 그리는 또 다른 방법이다.^[4] 캔버스가 래스터 기반인 것과 달리 SVG는 벡터 기반이므로 각 도형은 장면 그래프 또는 문서 객체 모델의 객체로 기억되어 이후 비트맵으로 렌더링된다. 즉, SVG 객체의 속성이 변경되면 브라우저가 자동으로 장면을 다시 렌더링할 수 있다.

반면에 캔버스 객체는 즉시 모드로 그려진다. 사각형의 위치가 변경되면 캔버스를 다시 그려야 하며, 사각형에 의해 덮였을 수 있는 모든 객체도 포함해야 한다. SVG와 동일한 경우, 사각형의 위치 속성을 변경하기만 하면 브라우저가 다시 그리는 방법을 결정한다. 캔버스 요소 내에서 SVG와 유사한 장면 기능을 갖도록 캔버스 모델을 추상화하는 추가적인 자바스크립트 라이브러리가 있다. 또한 여러 개의 캔버스 레이어를 사용할 수 있으며, 이는 변경이 필요할 때 특정 레이어만 다시 만들면 됨을 의미한다.

SVG 이미지는 XML로 표현되며, 복잡한 장면은 XML 편집 도구로 생성하고 유지 관리할 수 있다.

SVG 장면 그래프를 통해 이벤트 핸들러를 객체와 연결할 수 있으므로 사각형이 onClick 이벤트에 응답할 수 있다. 캔버스에서 동일한 기능을 얻으려면 마우스 클릭의 좌표계를 그려진 사각형의 좌표와 수동으로 일치시켜 클릭 여부를 결정해야 한다.

개념적으로 캔버스는 더 높은 수준의 인터페이스(예: SVG 지원)를 구축할 수 있는 하위 수준 API이다. SVG를 제공하지 않지만 캔버스를 지원하는 Android 2.x의 브라우저와 같이 캔버스를 사용하여 부분적인 SVG 구현을 제공하는 자바스크립트 라이브러리가 있다. 그러나 이는 일반적으로 그렇지 않으며 독립적인 표준이다. 캔버스용 장면 그래프 라이브러리가 있고 SVG에 비트맵 조작 기능이 있기 때문에 상황이 복잡하다.

7. 개인 정보 보호 문제

캔버스 핑거프린팅은 웹사이트가 HTML5 캔버스 요소를 사용하여 방문자를 식별하고 추적하는 브라우저 핑거프린팅 기술 중 하나이다. 이 기술은 2014년 프린스턴 대학교와 루벤 가톨릭 대학교 연구원들이 ''웹은 결코 잊지 않는다''라는 논문에서 설명한 후 언론의 광범위한 보도를 받았다.^[14] 캔버스 핑거프린팅과 관련된 개인 정보 보호 문제는 쿠키를 삭제하고 캐시를 지우더라도 사용자가 온라인 추적을 피하기 어렵다는 점에 초점을 맞추고 있다.

참조

_[1] 웹사이트 Extending HTML http://ln.hixie.ch/?[...] 2004-07-12
_[2] 웹사이트 HTMLCanvasElement https://developer.mo[...]
_[3] 웹사이트 Opera 9.0 changelog http://www.opera.com[...]
_[4] 웹사이트 Scalable Vector Graphics {{!}} CorelDRAW https://www.coreldra[...] 2022-09-23
_[5] 문서 Ian Hickson remarks regarding canvas and other Apple extensions to HTML http://ln.hixie.ch/?[...]
_[6] 웹사이트 [whatwg] Web Applications 1.0 Draft, David Hyatt, Wed Mar 14 14:31:53 PDT 2007 http://lists.whatwg.[...]
_[7] 문서 Web Applications 1.0 Early Working Draft - ''Dynamic graphics: The bitmap canvas'' http://www.whatwg.or[...]
_[8] 문서 HTML Working Group Patent Policy Status – Known Disclosures http://www.w3.org/20[...]
_[9] 문서 W3C patent policy in use by HTML working group http://www.w3.org/Co[...]
_[10] 웹사이트 What You Need to Know About the Sneakiest New Online Tracking Tool https://gizmodo.com/[...] 2014-07-21
_[11] 간행물 You Are Being Tracked Online By A Sneaky New Technology -- Here's What You Need To Know https://www.forbes.c[...] 2014-07-23
_[12] 웹사이트 Meet the Online Tracking Device That is Virtually Impossible to Block https://www.propubli[...] ProPublica 2014-07-21
_[13] 간행물 Stealthy Web tracking tools pose increasing privacy risks to users http://www.pcworld.c[...] 2014-07-21
_[14] 웹사이트 The Web never forgets: Persistent tracking mechanisms in the wild https://securehomes.[...] 2014-07-24
_[15] 웹사이트 SVG or Canvas? Сhoosing between the two http://dev.opera.com[...] Opera Software 2010-02-04
_[16] 웹사이트 Canvas, Microsoft Edge documentation https://docs.microso[...]
_[17] 뉴스 Mac OS X TigerのDashboardが標準化へ? - Web Applicationsのドラフト公開 | ネット | マイコミジャーナル https://news.mynavi.[...]
_[18] 문서 HTML Canvas 2D Context, Level 2 https://www.w3.org/T[...]
_[19] 문서 Ian Hickson remarks regarding canvas and other Apple extensions to HTML http://ln.hixie.ch/?[...]
_[20] 문서 [whatwg] Web Applications 1.0 Draft, David Hyatt, Wed Mar 14 14:31:53 PDT 2007 http://lists.whatwg.[...]
_[21] 문서 Web Applications 1.0 Early Working Draft - ''Dynamic graphics: The bitmap canvas'' http://www.whatwg.or[...]
_[22] 문서 HTML Working Group Patent Policy Status – Known Disclosures http://www.w3.org/20[...]
_[23] 문서 W3C patent policy in use by HTML working group https://www.w3.org/C[...]
_[24] 웹인용 Extending HTML http://ln.hixie.ch/?[...] 2004-07-12
_[25] 웹인용 HTMLCanvasElement https://developer.mo[...]
_[26] 웹인용 Opera 9.0 changelog http://www.opera.com[...]
_[27] 웹인용 SVG or Canvas? Сhoosing between the two http://dev.opera.com[...] Opera Software 2010-02-04
_[28] 웹인용 Canvas, Microsoft Edge documentation https://docs.microso[...]

본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com