그라디언트를 설명하는 불투명 객체를 나타내는 인터페이스이다.
별도의 생성자 함수는 없으며 CanvasRenderingContext2D.prototype.createLinearGradient()
, CanvasRenderingContext2D.prototype.createConicGradient()
, CanvasRenderingContext2D.prototype.createRadialGradient()
메소드에 의해서 반환된다.
오프셋과 색상으로 정의된 새 정지점을 그라디언트에 추가한다.
패턴을 다루는 불투명 객체를 나타낸다.
별도의 생성자 함수는 없으며 CanvasRenderingContext2D.prototype.createPattern()
메소드에 의해서 반환된다.
패턴에 선형 변환을 나타내는 SVGMatrix
또는 DOMMatrix
적용한다.
<canvas>
요소의 드로잉 표면에 2D 렌더링 컨텍스트를 제공한다. 도형, 텍스트, 이미지 및 기타 객체를 그리는데 사용된다.
생성자 함수는 지원하지 않으며 HTMLCanvasElement
인터페이스의 getContext()
메소드에 의해서 반환된다.
현재 패스에 호를 그린다.
현재 위치에서 주어진 제어점과 반지름을 사용하여 호를 추가한다.
새로운 패스를 시작한다.
현재 패스에서 3차 베지어 곡선을 추가한다.
시작점(x
, y
) 및 크기(width
, height
)로 정의된 사각형 영역의 모든 픽셀들을 제거한다.
현재 패스에서 클리핑 경로를 만든다.
열린 패스를 시점 지점과 연결하여 닫는다.
지정된 치수를 갖는 새로운 ImageData
객체를 생성한다.
매개변수로 지정된 좌표에 지정된 선을 따라 선형 그라데이션을 만든다.
지정된 이미지를 사용하여 패턴을 만든다.
매개 변수에 지정된 두 원의 좌표로 지정된 방사형 그라데이션을 만든다.
현재 요소에 포커스가 있다면 패스 주위에 포커스 표시를 한다.
캔버스에 이미지를 그리는 다양한 방법을 제공한다.
현재 패스에 타원을 추가한다.
현재 패스로 생성된 면에 지정된 스타일로 채운다.
width
와 height
에 따라 크기가 결정되는 x
, y
에 위치에 채워진 사각형을 그린다.
캔버스에 텍스트를 추가한다.
실제 컨텍스트 속성을 포함하는 객체를 반환한다.
지정된 좌표와 폭과 높이를 갖는 사각형으로 표시된 캔버스 영역에 대한 기본 픽셀 데이터를 나타내는 ImageData
객체를 반환한다.
대시라인(dash line)의 패턴 배열을 반환한다.
컨텍스트에 적용 중인 현재 변환 행렬을 검색한다.
지정된 포인트가 현재 패스에 포함되어 있는지 여부를 확인한다.
지정된 포인트가 패스의 stroke 영역 내에 있는지 여부를 알려준다.
현재 위치에서 매개 변수로 지정된 좌표로 직선으로 연결한다.
TextMetrics 객체를 반환한다.
매개 변수로 지정된 좌표로 이동한다.
지정된 ImageData 객체의 데이터를 비트맵에 그린다.
현재 패스에 2차 베지어 곡선을 추가한다.
매개 변수로 지정된 위치와 가로, 세로 크기를 사용하여 사각형 패스를 만든다.
단위 행렬로 현재 변환을 재설정한다.
save()로 저장된 상태 스택의 마지막 요소를 사용하여 복원한다.
변환 행렬에 회전을 추가한다.
현재 그리기 스타일 상태를 저장한다.
가로, 세로 값을 지정하여 <canvas>
요소의 단위에 크기 조정 변환을 추가한다.
대시 라인을 주어진 패턴으로 설정한다.
현재 변환을 단위 행렬로 재설정한 다음 동일한 인수로 transform() 메소드를 호출한다.
선을 지정된 스타일로 적용한다.
현재 획 스타일을 사용하여 x, y 값을 갖는 시작점에서 width, height 값을 갖는 사각형을 캔버스에 그린다.
x
, y
로 주어진 위치에 텍스트를 그린다.
현재 변환 행렬에 인수로 설정된 행렬을 곱한다.
캔버스와 캔버스의 원점을 그리드에서 x, y로 이동하여 변환을 추가한다.
연결된 HTMLCanvasElement
객체를 참조한다.
텍스트의 방향을 설정한다.
면에 적용할 색 또는 스타일을 지정한다.
캔버스에 CSS 또는 SVG 필터를 적용한다.
글꼴 및 크기를 설정한다.
캔버스에 합성되기 전에 쉐입(shape)과 이미지에 적용되는 투명도 값을 나타낸다.
새로운 형태를 캔버스에 그릴 때 적용할 합성 방식을 설정한다.
크기가 조정된 이미지를 매끄럽게 처리하기 위해 활성 여부를 설정한다.
이미지의 매끄러운 품질을 설정한다.
선 끝의 유형을 설정하거나 조회한다.
대시 라인에서 패턴을 시작할 위치를 지정한다.
선이 꺽이는 경우 모서리의 모양을 설정하거나 조회한다.
선의 굵기를 설정하거나 조회한다.
연귀한계 비율을 나타낸다.
그림자에 흐림 효과를 위한 값을 지정한다.
그림자의 색상을 지정한다.
그림자의 수평 위치를 나타낸다.
그림자의 수직 위치를 나타낸다.
선에 적용할 색 또는 스타일을 지정한다.
텍스트가 렌더링되는 좌표 기준으로 정렬을 설정한다.
텍스트 기준선에 대한 정렬을 설정한다.
과도한 지연없이 <canvas>
에 그릴 수 있는 비트맵 이미지를 다루는 인터페이스이다.
ImageBitmap
객체는 전역 스코프의 createImageBitmap()
생성 메소드를 사용하여 반환받는다.
캔버스의 콘텐츠를 주어진 ImageBitmap
객체로 바꾸는 기능을 제공하는 인터페이스이다.
생성자 함수는 없으며 HTMLCanvasElement.prototype.getContext()
또는 OffscreenCanvas.prototype.getContext()
메소드에서 반환된다.
현재 렌더링 컨텍스트와 연결된 캔버스에 지정된 ImageBitmap
객체를 표시한다.
<canvas>
요소 영역의 기본 픽셀 데이터를 다루는 인터페이스이다.
생성자 함수가 있으며 CanvasRenderingContext2D.prototype.createImageData()
또는 CanvasRenderingContext2D.prototype.getImageData()
메소드를 사용하여 반환받을 수 있다.
새로운 ImageData
객체를 생성한다.
<canvas>
요소를 화면 밖에서 렌더링을 할 수 있는 인터페이스이다.
새로운 OffscreenCanvas
객체를 생성하는 방법으로 OffscreenCanvas()
생성자 함수와 HTMLCanvasElement
객체의 transferControlToOffscreen()
메소드를 통해 반환받을 수 있다.
새로운 OffscreenCanvas
객체를 생성한다.
캔버스(canvas)에 들어있는 이미지에 대한 Blob
객체를 생성한다.
렌더링된 캔버스(canvas) 컨텍스트 객체를 반환한다.
가장 최근에 렌더링된 OffscreenCanvas에서 ImageBitmap
객체를 생성한다.
화면 밖의 <canvas>
요소의 드로잉 표면에 2D 렌더링 컨텍스트를 제공한다. 도형, 텍스트, 이미지 및 기타 객체를 그리는데 사용된다.
생성자 함수는 없으며 OffscreenCanvas.prototype.getContext()
메소드에 의해서 반환된다.
현재 패스에 호를 그린다.
현재 위치에서 주어진 제어점과 반지름을 사용하여 호를 추가한다.
새로운 패스를 시작한다.
현재 패스에서 3차 베지어 곡선을 추가한다.
시작점(x
, y
) 및 크기(width
, height
)로 정의된 사각형 영역의 모든 픽셀들을 제거한다.
현재 패스에서 클리핑 경로를 만든다.
열린 패스를 시점 지점과 연결하여 닫는다.
지정된 치수를 갖는 새로운 ImageData
객체를 생성한다.
매개변수로 지정된 좌표에 지정된 선을 따라 선형 그라데이션을 만든다.
지정된 이미지를 사용하여 패턴을 만든다.
매개 변수에 지정된 두 원의 좌표로 지정된 방사형 그라데이션을 만든다.
캔버스에 이미지를 그리는 다양한 방법을 제공한다.
현재 패스에 타원을 추가한다.
현재 패스로 생성된 면에 지정된 스타일로 채운다.
width
와 height
에 따라 크기가 결정되는 x
, y
에 위치에 채워진 사각형을 그린다.
캔버스에 텍스트를 추가한다.
지정된 좌표와 폭과 높이를 갖는 사각형으로 표시된 캔버스 영역에 대한 기본 픽셀 데이터를 나타내는 ImageData
객체를 반환한다.
대시라인(dash line)의 패턴 배열을 반환한다.
컨텍스트에 적용 중인 현재 변환 행렬을 검색한다.
지정된 포인트가 현재 패스에 포함되어 있는지 여부를 확인한다.
지정된 포인트가 패스의 stroke 영역 내에 있는지 여부를 알려준다.
현재 위치에서 매개 변수로 지정된 좌표로 직선으로 연결한다.
TextMetrics 객체를 반환한다.
매개 변수로 지정된 좌표로 이동한다.
지정된 ImageData 객체의 데이터를 비트맵에 그린다.
현재 패스에 2차 베지어 곡선을 추가한다.
매개 변수로 지정된 위치와 가로, 세로 크기를 사용하여 사각형 패스를 만든다.
단위 행렬로 현재 변환을 재설정한다.
save()로 저장된 상태 스택의 마지막 요소를 사용하여 복원한다.
변환 행렬에 회전을 추가한다.
현재 그리기 스타일 상태를 저장한다.
가로, 세로 값을 지정하여 <canvas>
요소의 단위에 크기 조정 변환을 추가한다.
대시 라인을 주어진 패턴으로 설정한다.
현재 변환을 단위 행렬로 재설정한 다음 동일한 인수로 transform() 메소드를 호출한다.
선을 지정된 스타일로 적용한다.
현재 획 스타일을 사용하여 x, y 값을 갖는 시작점에서 width, height 값을 갖는 사각형을 캔버스에 그린다.
x
, y
로 주어진 위치에 텍스트를 그린다.
현재 변환 행렬에 인수로 설정된 행렬을 곱한다.
캔버스와 캔버스의 원점을 그리드에서 x, y로 이동하여 변환을 추가한다.
OffscreenCanvas
객체를 참조한다.
텍스트의 방향을 설정한다.
면에 적용할 색 또는 스타일을 지정한다.
캔버스에 CSS 또는 SVG 필터를 적용한다.
글꼴 및 크기를 설정한다.
캔버스에 합성되기 전에 쉐입(shape)과 이미지에 적용되는 투명도 값을 나타낸다.
새로운 형태를 캔버스에 그릴 때 적용할 합성 방식을 설정한다.
크기가 조정된 이미지를 매끄럽게 처리하기 위해 활성 여부를 설정한다.
이미지의 매끄러운 품질을 설정한다.
선 끝의 유형을 설정하거나 조회한다.
대시 라인에서 패턴을 시작할 위치를 지정한다.
선이 꺽이는 경우 모서리의 모양을 설정하거나 조회한다.
선의 굵기를 설정하거나 조회한다.
연귀한계 비율을 나타낸다.
그림자에 흐림 효과를 위한 값을 지정한다.
그림자의 색상을 지정한다.
그림자의 수평 위치를 나타낸다.
그림자의 수직 위치를 나타낸다.
선에 적용할 색 또는 스타일을 지정한다.
텍스트가 렌더링되는 좌표 기준으로 정렬을 설정한다.
텍스트 기준선에 대한 정렬을 설정한다.
Path2D() 생성자 함수를 이용하여 새로운 Path2D 객체를 생성할 수 있다.
새로운 Path2D
객체를 생성한다.
현재 패스에 새로운 패스를 추가한다.
현재 패스에 호를 그린다.
현재 위치에서 주어진 제어점과 반지름을 사용하여 호를 추가한다.
현재 패스에서 3차 베지어 곡선을 추가한다.
열린 패스를 시점 지점과 연결하여 닫는다.
현재 패스에 타원을 추가한다.
현재 위치에서 매개 변수로 지정된 좌표로 직선으로 연결한다.
매개 변수로 지정된 좌표로 이동한다.
현재 패스에 2차 베지어 곡선을 추가한다.
매개 변수로 지정된 위치와 가로, 세로 크기를 사용하여 사각형 패스를 만든다.
캔버스 내의 텍스트 크기를 다루는 인터페이스이다.
생성자 함수는 존재하지 않으며 CanvasRenderingContext2D.prototype.measureText()
메소드로 반환받는다.
CanvasRenderingContext2D.prototype.textBaseline
속성으로 표시되는 수평선에서 텍스트를 렌더링하는 데 사용되는 경계 사각형의 상단까지의 거리를 나타낸다.
CanvasRenderingContext2D.prototype.textBaseline
속성으로 표시되는 수평선에서 텍스트를 렌더링하는 데 사용되는 경계 사각형의 맨 아래까지의 거리를 나타낸다.
CanvasRenderingContext2D.prototype.textAlign
속성에 의해 주어진 정렬 지점에서 텍스트 경계 사각형의 왼쪽까지의 거리를 CSS 픽셀로 조회한다.
CanvasRenderingContext2D.prototype.textAlign
속성에 의해 주어진 정렬 지점에서 텍스트 경계 사각형의 오른쪽까지의 거리를 CSS 픽셀로 조회한다.
CanvasRenderingContext2D.prototype.textBaseline
속성으로 표시되는 수평선에서 텍스트를 렌더링하는 데 사용되는 모든 글꼴의 가장 높은 경계 사각형의 상단까지의 거리를 나타낸다.
CanvasRenderingContext2D.prototype.textBaseline
속성으로 표시되는 수평선에서 텍스트를 렌더링하는 데 사용되는 모든 글꼴의 가장 높은 경계 사각형 하단까지의 거리를 나타낸다.
인라인 텍스트 세그먼트의 계산된 너비를 CSS 픽셀로 나타낸다.