Taille maximale d'un élément <canvas>

Question

Je travaille avec un élément de canevas d'une hauteur de 1 cm. 600 a 1000 pixels et une largeur de plusieurs dizaines ou centaines de milliers de pixels. Cependant, après un certain nombre de pixels (évidemment inconnu), la toile n'affiche plus les formes que je dessine avec JS.

Quelqu'un sait-il s'il y a une limite ?

Testé à la fois dans Chrome 12 et Firefox 4.

Answer 1

Mis à jour le 13/10/2014

Tous les navigateurs testés ont des limites pour la hauteur/largeur des éléments de toile, mais de nombreux navigateurs limitent également la surface totale de l'élément de toile. Les limites sont les suivantes pour les navigateurs que je suis en mesure de tester :

Chrome :

Hauteur/largeur maximale : 32 767 pixels
Surface maximale : 268 435 456 pixels (par exemple, 16 384 x 16 384)

Firefox :

Hauteur/largeur maximale : 32 767 pixels
Surface maximale : 472 907 776 pixels (par exemple, 22 528 x 20 992)

IE :

Hauteur/largeur maximale : 8 192 pixels
Surface maximale : N/A

IE Mobile :

Hauteur/largeur maximale : 4 096 pixels
Surface maximale : N/A

Autre :

Je ne suis pas en mesure de tester d'autres navigateurs pour le moment. Reportez-vous aux autres réponses de cette page pour des limites supplémentaires.

---

Le dépassement de la longueur/largeur/zone maximale sur la plupart des navigateurs rend le canevas inutilisable. (Il ignorera toute commande de dessin, même dans la zone utilisable). IE et IE Mobile respecteront toutes les commandes de dessin dans l'espace utilisable.

Answer 2

J'ai rencontré des erreurs de mémoire sur Firefox avec des hauteurs de toile supérieures à 8000, chrome semble gérer des hauteurs bien supérieures, au moins jusqu'à 32000.

EDIT : Après avoir effectué d'autres tests, j'ai trouvé des erreurs très étranges avec Firefox 16.0.2.

Tout d'abord, il semble que le comportement des canevas en mémoire (créés en javascript) soit différent de celui des canevas déclarés en html.

Deuxièmement, si vous ne disposez pas de la balise html et du jeu de caractères méta appropriés, le canevas peut être limité à 8196, sinon vous pouvez aller jusqu'à 32767.

Troisièmement, si vous obtenez le contexte 2d du canevas et que vous modifiez ensuite la taille du canevas, vous risquez d'être limité à 8196 également. En définissant simplement la taille du canevas avant de saisir le contexte 2d, vous pouvez aller jusqu'à 32767 sans avoir d'erreurs de mémoire.

Je n'ai pas été en mesure d'obtenir systématiquement les erreurs de mémoire, parfois c'est seulement sur le premier chargement de la page, et puis les changements de hauteur suivants fonctionnent. Voici le fichier html avec lequel je testais http://pastebin.com/zK8nZxdE .

Answer 3

Taille maximale de la toile iOS (largeur x hauteur) :

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

testé en mars 2014.

Answer 4

Pour développer un peu la réponse de @FredericCharette : Selon guide du contenu de safari à la section "Connaître les limites des ressources de l'iOS" :

La taille maximale d'un élément de toile est de 3 mégapixels pour les appareils dont la mémoire vive est inférieure à 256 Mo et de 5 mégapixels pour les appareils dont la mémoire vive est supérieure ou égale à 256 Mo.

Par conséquent, toute variation de taille de 5242880 (5 x 1024 x 1024) pixels fonctionnera sur les grands dispositifs de mémoire, sinon c'est 3145728 pixels.

Exemple pour une toile de 5 mégapixels (largeur x hauteur) :

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

et ainsi de suite

Les plus grandes toiles CARRÉES sont ("MiB" = 1024x1024 Octets) :

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

Answer 5

Selon w3 specs l'interface largeur/hauteur est un long non signé - donc de 0 à 4 294 967 295 (si je me souviens bien de ce nombre - je peux me tromper un peu).

EDIT : Bizarrement, il est indiqué unsigned long, mais le test montre juste une valeur longue normale comme valeur maximale : 2147483647. Jsfiddle - 47 fonctionne mais jusqu'à 48 et il revient à la valeur par défaut.