HTMLCanvasElement.getContext()

HTMLCanvasElement.getContext() 메소드는 캔버스의 드로잉 컨텍스트를 반환합니다. 컨텍스트 식별자가 지원되지 않을 경우 null을 반환합니다.

동일한 캔버스 엘리먼트에서 나중에 이 메소드를 호출하면 동일한 contextType 인자와 함께 메소드가 마지막으로 호출되었을 때 반환된 것과 같이 동일한 드로잉 컨텍스트 인스턴스를 반환합니다. 다른 드로잉 컨텍스트 객체를 얻으려면 다른 contextType을 전달하거나 다른 캔버스 엘리먼트에서 메소드를 호출해야 합니다.

구문

var ctx = canvas.getContext(contextType);
var ctx = canvas.getContext(contextType, contextAttributes);

파라미터

contextType
캔버스에 연관된 드로잉 컨텍스트를 정의하는 컨텍스트 식별자를 갖는 DOMString입니다. 가능한 값은 다음과 같습니다.
  • "2d", 2차원 렌더링 컨텍스트를 나타내는 CanvasRenderingContext2D 객체를 생성하게 합니다.
  • "webgl" (또는 "experimental-webgl"), 3차원 렌더링 컨텍스트를 나타내는 WebGLRenderingContext 객체를 생성합니다. 이 컨텍스트는 WebGL 버전 1 (OpenGL ES 2.0)을 구현하는 브라우저에서만 사용가능합니다.
  • "webgl2", 3차원 렌더링 컨텍스트를 나타내는 WebGL2RenderingContext 객체를 생성합니다. 이 컨텍스트는 WebGL 버전 2 (OpenGL ES 3.0)를 구현하는 브라우저에서만 사용가능합니다.
  • "bitmaprenderer", 캔버스의 컨텐츠를 주어진 ImageBitmap으로 대체하기위한 기능만을 제공하는 ImageBitmapRenderingContext를 생성합니다.

노트: 식별자 "experimental-webgl"은 WebGL의 새로운 구현에서 사용됩니다. 이러한 구현은 테스트 스위트 적합성을 아직 만족하지 못하며, 플랫폼 상의 그래픽 드라이버도 아직 불안정합니다. Khronos Group은 특정 적합성 규칙에 따라 WebGL 구현을 인증합니다.

contextAttributes

렌더링 컨텍스트를 생성할 때 몇 가지 컨텍스트 속성을 사용할 수 있습니다. 예를 들면:

const gl = canvas.getContext('webgl', {
  antialias: false,
  depth: false
});
2d 컨텍스트 속성:
  • alpha: 캔버스가 알파 채널을 포함하는지를 나타내는 불리언입니다. false로 설정할 경우, 브라우저는 이제 배경이 항상 투명하다는 것을 알기때문에 투명한 컨텐츠나 이미지를 그리는 속도를 높일수 있습니다.
  • (Gecko 전용) willReadFrequently: 많은 다시 읽기 작업이 계획되어있는지 여부를 나타내는 불리언입니다. 이는 소프트웨어(하드웨어 가속 대신) 2D 캔버스의 사용을 강제하며 getImageData() 호출이 빈번할때 메모리를 절약할 수 있습니다. 이 옵션은 gfx.canvas.willReadFrequently.enable 플래그가 true(기본 값이며, B2G/Firefox OS에만 해당) 설정되었을 경우에만 사용가능합니다.
  • (Blink only) storage: 어떤 스토리지가 사용되었는지를 나타내는 문자열입니다(기본값은 "persistent").
WebGL 컨텍스트 속성:
  • alpha: 캔버스가 알파 버퍼를 포함하는지 여부를 나타내는 불리언입니다.
  • antialias: 안티 앨리어싱을 수행할지 여부를 나타내는 불리언입니다.
  • depth: 드로잉 버퍼가 최소 16 비트의 깊이 버퍼를 갖는지 여부를 나타내는 불리언입니다.
  • failIfMajorPerformanceCaveat: 시스템 성능이 낮을 경우에 컨텍스트를 생성할지 여부를 나타내는 불리언입니다.
  • powerPreference: WebGL 컨텍스트에 대해 적합한 GPU 구성이 무엇인지를 나타내는 유저 에이전트에 대한 힌트입니다. 가능한 값은 다음과 같습니다.
    • "default": 유저 에이전트가 가장 적합한 GPU 구성을 결정하도록 합니다. 기본 값입니다.
    • "high-performance": 전력 소비보다 렌더링 성능을 우선시합니다.
    • "low-power": 렌더링 성능보다 전력 절약을 우선시합니다.
  • premultipliedAlpha: 페이지 컴포지터가 미리 곱해진 알파를 갖는 컬러를 포함하는 드로잉 버퍼를 가정할 것인지 여부를 나타내는 불리언입니다.
  • preserveDrawingBuffer: 값이 true일 경우 버퍼는 제거되지 않으며 값이 제거되거나 덮어쓰여지기 전까지 유지됩니다.
  • stencil: 드로잉 버퍼가 최소 8 비트의 스텐실 버퍼를 갖는지 여부를 나타내는 불리언입니다.

반환 값

RenderingContext는 다음 중 하나입니다.

contextType이 가능한 드로잉 컨텍스트와 일치하지 않으면, null이 반환됩니다.

예시

다음 <canvas> 엘리먼트를 고려해볼 때:

<canvas id="canvas" width="300" height="300"></canvas>

다음 코드를 사용해 캔버스의 2d 컨텍스트를 얻을 수 있습니다.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
console.log(ctx); // CanvasRenderingContext2D { ... }

이제 캔버스에 대한 2D 렌더링 컨텍스트를 갖고 있으며 이 안에 그릴 수 있습니다.

명세

명세 상태 코멘트
HTML Living Standard
The definition of 'HTMLCanvasElement.getContext' in that specification.
Living Standard 최신 스냅샷 HTML5 이후에 변경사항 없음
HTML 5.1
The definition of 'HTMLCanvasElement.getContext' in that specification.
Recommendation  
HTML5
The definition of 'HTMLCanvasElement.getContext' in that specification.
Recommendation 초기 정의를 포함하는 HTML Living Standard의 스냅샷.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
getContextChrome Full support YesEdge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support 9Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
bitmaprenderer contextChrome Full support 56Edge ? Firefox Full support 46IE No support NoOpera Full support 43Safari No support NoWebView Android No support NoChrome Android Full support 56Firefox Android Full support 46Opera Android Full support 43Safari iOS No support NoSamsung Internet Android Full support 6.0
failIfMajorPerformanceCaveat attributeChrome Full support YesEdge ? Firefox Full support 41IE Full support YesOpera Full support YesSafari ? WebView Android No support NoChrome Android No support NoFirefox Android Full support 41Opera Android ? Safari iOS ? Samsung Internet Android No support No
powerPreference attributeChrome No support NoEdge No support NoFirefox Full support 63IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 63Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
WebGL contextChrome Full support 33
Full support 33
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
Edge Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
Firefox Full support 24
Full support 24
Full support 3.6
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
IE Full support 11
Alternate Name
Full support 11
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
Opera Full support 15
Full support 15
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
Safari Full support 5.1
Alternate Name
Full support 5.1
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
WebView Android Full support 37
Full support 37
Full support 37
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
Chrome Android Full support 33
Full support 33
Full support 18
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
Firefox Android Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
Opera Android Full support 14
Full support 14
Full support 10.1
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl
Safari iOS ? Samsung Internet Android ?
WebGL2 contextChrome Full support 56Edge No support No
Notes
No support No
Notes
Notes WebGL 2 is under consideration in Edge, with a roadmap priority of medium. See the Edge Platform status for latest information.
Firefox Full support 51
Full support 51
Full support 25
Alternate Name
Alternate Name Uses the non-standard name: experimental-webgl2
IE No support NoOpera No support NoSafari No support NoWebView Android Full support 56Chrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
2d alpha context attributeChrome Full support 32Edge ? Firefox Full support 30IE No support NoOpera Full support YesSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 30Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

함께 보기