DOM

settings_applicationsEventTarget  >   settings_applicationsNode  >   settings_applicationsElement  >   settings_applicationsHTMLElement  >   settings_applicationsHTMLCanvasElement  >   settings_applications[[Prototype]]

DOM

Editing
  • account_tree
  • bug_report

ObjectcontextgetContext(stringcontextType, ObjectcontextAttributes | ObjectcontextAttributes])

<canvas>상의 드로잉 컨텍스트를 반환한다.

구문

형식
var canvasContext = canvasElement.getContext(contextType);

contextType만 지정해서 연관된 드로잉 컨텍스트를 반환받는다.

contextType을 2d로 지정하여 CanvasRenderingContext2D 객체를 받는다.
형식
var convasContext = canvasElement.getContext(contextType, contentAttribure);

매개 변수

stringcontextType필수

<canvas> 요소의 드로잉 컨텍스트를 정의하는 컨텍스트 식별자이며 다음 아래의 값을 가질 수 있다.

2d
2차원 렌더링 컨텍스트를 나타내는 CanvasRenderingContext2D 객체를 반환한다.
webgl 또는 experimental-webgl
3차원 렌더링 컨텍스트를 나타내는 WebGLRenderingContext 객체를 반환한다. 이 컨텍스트는 WebGL 버전 1(OpenGL ES2.0)을 구현하는 웹브라우저에서만 사용이 가능하다.
webgl2
3차원 렌더링 컨텍스트를 나타내는WebGL2RenderingContext 객체를 생성한다.  이 컨텍스트는 WebGL 버전 2(OpenGL ES3.0)를 구현하는 웹브라우저에서만 사용이 가능하다.
bitmaprenderer
<​canvas> 요소의 콘텐츠를 주어진 ImageBitmap으로 대체하기 위한 기능만을 제공하는 ImageBitmapRenderingContext 객체를 반환한다. 
webgpu
WebGPU API를 사용할 수 있는 3차원 렌더링 컨텍스트를 나타내는 GPUCanvasContext 객체를 생성한다. WebGPU API가 지원되는 웹브라우저에서 사용이 가능하다.
ObjectcontextAttributes선택
2D 컨텍스트

다음의 프로퍼티를 선택적으로 포함하는 객체를 지정한다.

alpha
<canva>  요소가 알파 채널을 포함하는 지를 나타내는 불리언(boolean) 값이다. false로 설정할 경우 배경이 항상 투명하다는 것으로 간주 하기에 투명 컨텐츠나 이미지를 그리는 데 속도를 높일 수 있다.
colorSpace

렌더링 컨텍스트의 색상 공간을 지정한다. 사용 가능한 값은 다음과 같다.

  • "srgb" : 기본값이며 sRGB 색 공간을 지정한다.
  • "display-p3" : display-p3 색 공간을 선택한다.
desynchronized
이벤트 루프에서 캔버스 페인트 주기를 비동기화하여 대기 시간을 줄이도록 유저 에이전트에게 힌트를 줄 수 있다. 값의 유형은 불리언(boolean)이다.
willReadFrequently
잦은 읽기 작업이 계획되어 있는지 여부를 나타내는 불리언(boolean) 값이다. 지정하면 하드웨어 가속 대신에 소프트웨어 2D 캔버스를 사용하게 되며 getImageData()를 자주 호출할 때 메모리를 절약할 수 있다.
또는 다른 타입
ObjectcontextAttributes선택
WebGL 컨텍스트

다음의 프로퍼티를 선택적으로 포함하는 객체를 지정한다.

alpha
<canvas> 요소가 알파 버퍼를 포함하는지 여부를 나타내는 불리언(boolean) 값이다.
antialias
안티 앨리아싱을 수행할지 여부를 나타내는 불리언(boolean) 값이다.
depth
드로잉 버퍼가 최소 16비트 깊이의 버퍼를 가질 것인지 여부를 나타내는 불리언(boolean) 값이다.
desynchronized
이벤트 루프에서 캔버스 페인트 주기를 비동기화하여 대기 시간을 줄이도록 유저 에이전트에게 힌트를 주는 불리언(boolean) 값이다.
failIfMajorPerformanceCaveat
시스템 성능이 낮을 경우 컨텍스트를 생성할지 여부를 나타내는 불리언(boolean) 값이다.
powerPreference

WebGL 컨텍스트에 대한 적합한 GPU 구성이 무엇인지를 나타내는 유저 에이전트에 대한 힌트이다. 가능한 문자열 값은 다음과 같다.

  • 'default' : 유저 에이전트가 가장 적합한 GPU 구성을 결정하도록 한다. 기본값이다.
  • 'high-performance' : 전력 소비보다 렌더링 성능을 우선시 한다.
  • 'lower-power' : 렌더링 성능보다는 전력 절약을 우선시 한다.
premultipliedAlpha
페이지 컴포지터가 미리 곱해진 알파를 갖는 색상을 포함하는 드로잉 버퍼를 가정할 것인지 여부를 나타내는 불리언(boolean) 값이다.
preserveDrawingBuffer
true일 경우에 버퍼는 제거되지 않으며 명시적으로 값을 제거하거나 덮어 쓰여지기 전까지는 유지된다.
stencil
드로잉 버퍼가 최소 8비트의 스텐실 버퍼를 갖는지 여부를 나타내는 불리언(boolean) 값이다.
xrCompatible
몰입형 XR 장치에 호환되는 그래픽 어댑터를 사용하도록 유저 에이전트에게 힌트를 주는 불리언(boolean) 값이다.

반환

Objectcontext

반환되는 렌더링 컨텍스트는 contextType에 따라 다음 중 하나가 될 수 있다.

"2d"
CanvasRenderingContext2D
"webgl" 또는 "experimental-webgl"
WebGLRenderingContext​
"webgl2"
WebGL2RenderingContext
"bitmaprenderer"
ImageBitmapRenderingContext
"webgpu"
GPUCanvasContext

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

버전 명세

지원 웹브라우저