Canvas API, WebGL

Canvas API와 WebGL

Canvas API, WebGL 모두 HTML5의 canvas 요소를 사용하여 사용할 수 있다.

💡 canvas 요소 사용은 Canvas API를 사용하는 것과 같음. WebGL도 이 canvas 요소를 통해 사용할 수 있는 것.

❓ Canvas API란
JavaScript와 HTML5 canvas 요소를 통해 그래픽을 그리기 위한 수단을 제공하는 API.

• 무엇보다 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용한다.
• 하드웨어 가속 2D 및 3D 그래픽을 그리고 주로 2D 그래픽에 중점을 두고 있다.

📌 Canvas API - Mozilla

❓ WebGL이란
플러그인을 사용하지 않고 웹 브라우저에서 상호작용 가능한 3D와 2D 그래픽을 표현하기 위한 JavaScript API.

• OpenGL ES 2에서 파생되었다.
• HTML5 canvas 요소에서 사용할 수 있는, OpenGL ES 2.0을 대부분 충족하는 API를 제공한다.

📌 WebGL - Mozilla

---

코드

WebGL로 canvas2d의 drawImage 구현
Drawing an image using WebGL - stackoverflow