<canvas> 요소의 최대 크기 또는 수십만 픽셀 인 캔버스 요소로 작업하고

높이 600가 1000픽셀이고 너비가 수만 또는 수십만 픽셀 인 캔버스 요소로 작업하고 있습니다. 그러나 특정 픽셀 수 (분명히 알려지지 않음)가 지나면 캔버스에 JS로 그린 모양이 더 이상 표시되지 않습니다.

제한이 있는지 아는 사람이 있습니까?

Chrome 12 및 Firefox 4에서 모두 테스트되었습니다.

답변

2014 년 10 월 13 일 업데이트 됨

테스트 된 모든 브라우저에는 캔버스 요소의 높이 / 너비에 대한 제한이 있지만 많은 브라우저는 캔버스 요소의 전체 영역도 제한합니다. 테스트 할 수있는 브라우저에 대한 제한은 다음과 같습니다.

크롬:

최대 높이 / 너비 : 32,767 픽셀
최대 영역 : 268,435,456 픽셀 (예 : 16,384 x 16,384)

Firefox :

최대 높이 / 너비 : 32,767 픽셀
최대 영역 : 472,907,776 픽셀 (예 : 22,528 x 20,992)

IE :

최대 높이 / 너비 : 8,192 픽셀
최대 영역 : N / A

IE 모바일 :

최대 높이 / 너비 : 4,096 픽셀
최대 영역 : N / A

다른:

지금은 다른 브라우저를 테스트 할 수 없습니다. 추가 제한 사항은이 페이지의 다른 답변을 참조하십시오.

대부분의 브라우저에서 최대 길이 / 너비 / 영역을 초과하면 캔버스를 사용할 수 없게됩니다. (사용 가능한 영역에서도 그리기 명령을 무시합니다.) IE 및 IE Mobile은 사용 가능한 공간 내의 모든 그리기 명령을 준수합니다.

답변

캔버스 높이가 8000보다 큰 Firefox에서 메모리 부족 오류가 발생했습니다. 크롬은 최소한 32000까지 훨씬 더 높은 수준으로 처리하는 것 같습니다.

편집 : 더 많은 테스트를 실행 한 후 Firefox 16.0.2에서 매우 이상한 오류를 발견했습니다.

첫째, html 선언 캔버스와 달리 메모리 (자바 스크립트로 생성) 캔버스에서 다른 동작을 얻는 것 같습니다.

둘째, 적절한 html 태그와 메타 문자 세트가 없으면 캔버스가 8196으로 제한 될 수 있으며 그렇지 않으면 32767까지 이동할 수 있습니다.

셋째, 캔버스의 2d 컨텍스트를 얻은 다음 캔버스 크기를 변경하면 8196으로 제한 될 수도 있습니다. 2d 컨텍스트를 잡기 전에 캔버스 크기를 설정하기 만하면 메모리 오류없이 최대 32767을 가질 수 있습니다.

일관되게 메모리 오류를 얻을 수 없었으며 때로는 첫 번째 페이지로드에서만 발생하고 후속 높이 변경이 작동합니다. 이것은 http://pastebin.com/zK8nZxdE 로 테스트 한 html 파일 입니다.

답변

iOS 최대 캔버스 크기 (너비 x 높이) :

 iPod Touch 16GB = 1448x1448
 iPad Mini       = 2290x2289
 iPhone 3        = 1448x1448
 iPhone 5        = 2290x2289

2014 년 3 월에 테스트되었습니다.

답변

@FredericCharette 답변에 대해 조금 확장하려면 : “iOS 리소스 제한 이해”섹션 아래에있는 safari의 콘텐츠 가이드에 따라 :

캔버스 요소의 최대 크기는 RAM이 256MB 미만인 장치의 경우 3 메가 픽셀이고 RAM이 256MB 이상인 장치의 경우 5 메가 픽셀입니다.

따라서 5242880 (5 x 1024 x 1024) 픽셀의 모든 크기 변형은 대용량 메모리 장치에서 작동하고 그렇지 않으면 3145728 픽셀입니다.

5 메가 픽셀 캔버스의 예 (너비 x 높이) :

Any total <= 5242880
--------------------
5 x 1048576 ~= 5MP   (1048576 = 1024 x 1024)
50 x 104857 ~= 5MP
500 x 10485 ~= 5MP

등등..

가장 큰 SQUARE 캔버스는 ( “MiB”= 1024×1024 바이트)입니다.

device < 256 MiB   device >= 256 MiB   iPhone 6 [not confirmed]
-----------------  -----------------   ---------------------
<= 3145728 pixels  <= 5242880 pixels   <= 16 x 1024 x 1024 p
1773 x 1773        2289 x 2289         4096 x 4096

답변

2018 년 업데이트 :

시간이 지남에 따라 캔버스 제한이 변경되었습니다. 안타깝게도 변경되지 않은 것은 브라우저가 여전히 Canvas API를 통해 캔버스 크기 제한에 대한 정보를 제공하지 않는다는 사실입니다.

프로그래밍 방식으로 브라우저의 최대 캔버스 크기를 결정하거나 사용자 정의 캔버스 크기에 대한 지원을 테스트하려는 경우 canvas-size를 확인하십시오 .

문서에서 :

HTML 캔버스 요소는 최신 및 레거시 브라우저에서 널리 지원되지만 각 브라우저 및 플랫폼 조합은 초과시 캔버스를 사용할 수 없게 만드는 고유 한 크기 제한을 부과합니다. 안타깝게도 브라우저는 제한 사항을 확인할 수있는 방법을 제공하지 않으며 사용할 수없는 캔버스가 생성 된 후 어떤 종류의 피드백도 제공하지 않습니다. 따라서 특히 다양한 브라우저와 플랫폼을 지원하는 응용 프로그램의 경우 큰 캔버스 요소로 작업하는 것이 어렵습니다.

이 마이크로 라이브러리는 브라우저에서 지원하는 HTML 캔버스 요소의 최대 영역, 높이 및 너비와 사용자 정의 캔버스 크기를 테스트하는 기능을 제공합니다. 새 캔버스 요소가 생성되기 전에이 정보를 수집함으로써 애플리케이션은 각 브라우저 / 플랫폼의 크기 제한 내에서 캔버스 크기를 안정적으로 설정할 수 있습니다.

데모 링크 및 테스트 결과는 에서 사용할 수있는 README 뿐만 아니라 알려진 문제 성능 및 가상 머신 고려 사항에 닿는 부분.

전체 공개, 나는 도서관의 저자입니다. 2014 년에 다시 만들었고 최근에 새로운 캔버스 관련 프로젝트의 코드를 다시 검토했습니다. 2018 년에 캔버스 크기 제한을 감지하는 데 사용할 수있는 도구가 똑같이 부족하다는 사실에 놀랐 기 때문에 코드를 업데이트하고 릴리스했으며 다른 사람들이 유사한 문제를 겪는 데 도움이되기를 바랍니다.

답변

w3 사양 에 따르면 너비 / 높이 인터페이스는 부호없는 길이이므로 0에서 4,294,967,295까지입니다 (그 숫자를 기억한다면-약간 떨어져있을 수 있습니다).

편집 : 이상하게도 unsigned long이라고 말하지만 테스트는 최대 길이 인 2147483647로 정상 long 값만 표시합니다. Jsfiddle -47은 작동하지만 최대 48 개이며 기본값으로 돌아갑니다.

답변

캔버스에서 height = 2147483647을 입력 할 수 있지만 그리기를 시작하면 아무 일도 일어나지 않습니다.

드로잉은 높이를 32767로 되돌릴 때만 발생합니다.