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

Est-ce que quelqu'un sait s'il y a une limite?

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

Mis à jour le 13/10/2014

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

Chrome:

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

Firefox:

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

C'EST À DIRE:

Hauteur / largeur maximale: 8192 pixels
Zone maximale: N / A

Mobile IE:

Hauteur / largeur maximale: 4096 pixels
Zone maximale: N / A

Autre:

Je ne peux pas tester d'autres navigateurs pour le moment. Reportez-vous aux autres réponses sur cette page pour connaître les limites supplémentaires.

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

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

EDIT: Après avoir exécuté quelques tests supplémentaires, j'ai trouvé des erreurs très étranges avec Firefox 16.0.2.

Premièrement, je semble avoir un comportement différent du canevas en mémoire (créé en javascript) par opposition au canevas déclaré html.

Deuxièmement, si vous n'avez pas la balise html et le 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 pourriez également être limité à 8196. Le simple fait de définir la taille du canevas avant de saisir le contexte 2d vous permet d'avoir jusqu'à 32767 sans avoir d'erreurs de mémoire.

Je n'ai pas pu obtenir systématiquement les erreurs de mémoire, parfois ce n'est que lors du chargement de la première page, puis les changements de hauteur ultérieurs fonctionnent. C'est le fichier html que je testais avec http://pastebin.com/zK8nZxdE .

Taille maximale du canevas iOS (largeur x hauteur):

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

testé en mars 2014.

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

La taille maximale d'un élément de canevas est de 3 mégapixels pour les appareils avec moins de 256 Mo de RAM et de 5 mégapixels pour les appareils avec une RAM 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 périphériques de mémoire, sinon il s'agit de 3145728 pixels.

Exemple pour un canevas 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

etc..

Les plus grandes toiles SQUARE sont ("Mio" = 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

Mise à jour pour 2018:

Au fil du temps, les limitations de la toile ont changé. Malheureusement, ce qui n'a pas changé, c'est le fait que le navigateur ne fournit toujours pas d'informations sur les limitations de taille du canevas via l'API Canvas.

Pour ceux qui cherchent à déterminer par programme la taille maximale du canevas du navigateur ou à tester la prise en charge des dimensions de canevas personnalisées, consultez canvas-size .

• GitHub : https://github.com/jhildenbiddle/canvas-size
• NPM : https://www.npmjs.com/package/canvas-size

À partir de la documentation:

L'élément de canevas HTML est largement pris en charge par les navigateurs modernes et hérités, mais chaque combinaison de navigateur et de plate-forme impose des limitations de taille uniques qui rendront un canevas inutilisable lorsqu'il est dépassé. Malheureusement, les navigateurs ne fournissent aucun moyen de déterminer quelles sont leurs limites, ni ne fournissent aucun type de retour après la création d'un canevas inutilisable. Cela rend le travail avec de grands éléments de canevas un défi, en particulier pour les applications qui prennent en charge une variété de navigateurs et de plates-formes.

Cette micro-bibliothèque fournit la zone, la hauteur et la largeur maximales d'un élément de canevas HTML pris en charge par le navigateur, ainsi que la possibilité de tester des dimensions de canevas personnalisées. En collectant ces informations avant la création d'un nouvel élément de canevas, les applications peuvent définir de manière fiable les dimensions du canevas dans les limites de taille de chaque navigateur / plate-forme.

Un lien de démonstration et les résultats des tests sont disponibles dans le README , ainsi qu'une section sur les problèmes connus qui aborde les considérations relatives aux performances et aux machines virtuelles.

Divulgation complète, je suis l'auteur de la bibliothèque. Je l'ai créé en 2014 et j'ai récemment revisité le code d'un nouveau projet lié au canevas. J'ai été surpris de constater le même manque d'outils disponibles pour détecter les limitations de taille de la toile en 2018, j'ai donc mis à jour le code, l'ai publié et j'espère que cela aidera d'autres personnes à rencontrer des problèmes similaires.

Selon les spécifications de w3 , l'interface largeur / hauteur est une longueur non signée - donc de 0 à 4 294 967 295 (si je me souviens bien de ce nombre - peut-être quelques-uns).

EDIT: Étrangement, il dit long non signé, mais il teste juste une valeur longue normale comme max: 2147483647. Jsfiddle - 47 fonctionne mais jusqu'à 48 et il revient à la valeur par défaut.

Même si le canevas vous permettra de mettre height = 2147483647, lorsque vous commencez à dessiner, rien ne se passe

Le dessin ne se produit que lorsque je ramène la hauteur à 32767

iOS a des limites différentes.

En utilisant le simulateur iOS 7, j'ai pu démontrer que la limite est de 5 Mo comme ceci:

var canvas = document.createElement('canvas');
canvas.width = 1024 * 5;
canvas.height = 1024;
alert(canvas.toDataURL('image/jpeg').length);
// prints "110087" - the expected length of the dataURL

mais si j'augmente la taille du canevas d'une seule rangée de pixels:

var canvas = document.createElement('canvas');
canvas.width = 1024 * 5;
canvas.height = 1025;
alert(canvas.toDataURL('image/jpeg'));
// prints "data:," - a broken dataURL

Sur PC,
je ne pense pas qu'il y ait de restriction mais oui, vous pouvez sortir de l'exception de mémoire.

Sur les appareils mobiles -
Voici les restrictions pour le canevas pour les appareils mobiles: -

La taille maximale d'un élément de canevas est de 3 mégapixels pour les appareils avec moins de 256 Mo de RAM et de 5 mégapixels pour les appareils avec plus ou égal à 256 Mo de RAM.

Par exemple, si vous souhaitez prendre en charge le matériel plus ancien d'Apple, la taille de votre canevas ne peut pas dépasser 2048 × 1464.

J'espère que ces ressources vous aideront à vous retirer.

Les limitations de Safari (toutes les plates-formes) sont beaucoup plus faibles.

Limitations connues d'iOS / Safari

Par exemple, j'avais un tampon de toile de 6400x6400px avec des données dessinées dessus. En traçant / exportant le contenu et en testant sur d'autres navigateurs, j'ai pu voir que tout allait bien. Mais sur Safari, cela passerait le dessin de ce tampon spécifique dans mon contexte principal.

J'ai essayé de déterminer par programme la limite: définir la taille de la toile à partir de 35000, descendre de 100 jusqu'à ce qu'une taille valide soit trouvée. À chaque étape, écrire le pixel en bas à droite, puis le lire. Cela fonctionne - avec prudence.

La vitesse est acceptable si la largeur ou la hauteur est réglée sur une valeur faible (par exemple 10-200) de cette façon: get_max_canvas_size('height', 20) .

Mais s'il est appelé sans largeur ou hauteur comme get_max_canvas_size(), le canevas créé est si grand que la lecture de la couleur SINGLE pixel est très lente, et dans IE provoque un sérieux blocage.

Si ce test pouvait être fait d'une manière ou d'une autre sans lire la valeur des pixels, la vitesse serait acceptable.

Bien sûr, le moyen le plus simple de détecter la taille maximale serait un moyen natif d'interroger la largeur et la hauteur maximales. Mais Canvas est «un niveau de vie», donc peut-être arrivera-t-il un jour.

http://jsfiddle.net/timo2012/tcg6363r/2/ (Attention, votre navigateur peut se bloquer!)

if (!Date.now)
{
  Date.now = function now()
  {
    return new Date().getTime();
  };
}

var t0 = Date.now();
//var size = get_max_canvas_size('width', 200);
var size = get_max_canvas_size('height', 20);
//var size = get_max_canvas_size();
var t1 = Date.now();
var c = size.canvas;
delete size.canvas;
$('body').append('time: ' + (t1 - t0) + '<br>max size:' + JSON.stringify(size) + '<br>');
//$('body').append(c);

function get_max_canvas_size(h_or_w, _size)
{
  var c = document.createElement('canvas');
  if (h_or_w == 'height') h = _size;
  else if (h_or_w == 'width') w = _size;
  else if (h_or_w && h_or_w !== 'width' && h_or_w !== 'height' || !window.CanvasRenderingContext2D)
    return {
      width: null,
      height: null
    };
  var w, h;
  var size = 35000;
  var cnt = 0;
  if (h_or_w == 'height') w = size;
  else if (h_or_w == 'width') h = size;
  else
  {
    w = size;
    h = size;
  }

  if (!valid(w, h))
    for (; size > 10; size -= 100)
    {
      cnt++;
      if (h_or_w == 'height') w = size;
      else if (h_or_w == 'width') h = size;
      else
      {
        w = size;
        h = size;
      }
      if (valid(w, h)) break;
    }
  return {
    width: w,
    height: h,
    iterations: cnt,
    canvas: c
  };

  function valid(w, h)
  {
    var t0 = Date.now();
    var color, p, ctx;
    c.width = w;
    c.height = h;
    if (c && c.getContext)
      ctx = c.getContext("2d");
    if (ctx)
    {
      ctx.fillStyle = "#ff0000";
      try
      {
        ctx.fillRect(w - 1, h - 1, 1, 1);
        p = ctx.getImageData(w - 1, h - 1, 1, 1).data;
      }
      catch (err)
      {
        console.log('err');
      }

      if (p)
        color = p[0] + '' + p[1] + '' + p[2];
    }
    var t1 = Date.now();

    if (color == '25500')
    {
      console.log(w, h, true, t1 - t0);
      return true;
    }
    console.log(w, h, false, t1 - t0);
    return false;
  }
}

Lorsque vous utilisez des toiles WebGL, les navigateurs (y compris ceux de bureau) imposent des limites supplémentaires sur la taille du tampon sous-jacent. Même si votre toile est grande, par exemple 16 000x16 000, la plupart des navigateurs afficheront une image plus petite (disons 4096x4096) et la redimensionneront. Cela pourrait provoquer une pixellisation laide, etc.

J'ai écrit du code pour déterminer cette taille maximale en utilisant la recherche exponentielle, si quelqu'un en a besoin. determineMaxCanvasSize()est la fonction qui vous intéresse.

function makeGLCanvas()
{
    // Get A WebGL context
    var canvas = document.createElement('canvas');
    var contextNames = ["webgl", "experimental-webgl"];
    var gl = null;
    for (var i = 0; i < contextNames.length; ++i)
    {
        try
        {
            gl = canvas.getContext(contextNames[i], {
                // Used so that the buffer contains valid information, and bytes can
                // be retrieved from it. Otherwise, WebGL will switch to the back buffer
                preserveDrawingBuffer: true
            });
        }
        catch(e) {}
        if (gl != null)
        {
            break;
        }
    }
    if (gl == null)
    {
        alert("WebGL not supported.\nGlobus won't work\nTry using browsers such as Mozilla " +
            "Firefox, Google Chrome or Opera");
        // TODO: Expecting that the canvas will be collected. If that is not the case, it will
        // need to be destroyed somehow.
        return;
    }

    return [canvas, gl];
}

// From Wikipedia
function gcd(a,b) {
    a = Math.abs(a);
    b = Math.abs(b);
    if (b > a) {var temp = a; a = b; b = temp;}
    while (true) {
        if (b == 0) return a;
        a %= b;
        if (a == 0) return b;
        b %= a;
    }
}

function isGlContextFillingTheCanvas(gl) {
    return gl.canvas.width == gl.drawingBufferWidth && gl.canvas.height == gl.drawingBufferHeight;
}

// (See issue #2) All browsers reduce the size of the WebGL draw buffer for large canvases 
// (usually over 4096px in width or height). This function uses a varian of binary search to
// find the maximum size for a canvas given the provided x to y size ratio.
//
// To produce exact results, this function expects an integer ratio. The ratio will be equal to:
// xRatio/yRatio.
function determineMaxCanvasSize(xRatio, yRatio) {
    // This function works experimentally, by creating an actual canvas and finding the maximum
    // value, the browser allows.
    [canvas, gl] = makeGLCanvas();

    // Reduce the ratio to minimum
    gcdOfRatios = gcd(xRatio, yRatio);
    [xRatio, yRatio] = [xRatio/gcdOfRatios, yRatio/gcdOfRatios];

    // if the browser cannot handle the minimum ratio, there is not much we can do
    canvas.width = xRatio;
    canvas.height = yRatio;

    if (!isGlContextFillingTheCanvas(gl)) {
        throw "The browser is unable to use WebGL canvases with the specified ratio: " + 
            xRatio + ":" + yRatio;
    }

    // First find an upper bound
    var ratioMultiple = 1;  // to maintain the exact ratio, we will keep the multiplyer that
                            // resulted in the upper bound for the canvas size
    while (isGlContextFillingTheCanvas(gl)) {
        canvas.width *= 2;
        canvas.height *= 2;
        ratioMultiple *= 2;
    }

    // Search with minVal inclusive, maxVal exclusive
    function binarySearch(minVal, maxVal) {
        if (minVal == maxVal) {
            return minVal;
        }

        middle = Math.floor((maxVal - minVal)/2) + minVal;

        canvas.width = middle * xRatio;
        canvas.height = middle * yRatio;

        if (isGlContextFillingTheCanvas(gl)) {
            return binarySearch(middle + 1, maxVal);
        } else {
            return binarySearch(minVal, middle);
        }
    }

    ratioMultiple = binarySearch(1, ratioMultiple);
    return [xRatio * ratioMultiple, yRatio * ratioMultiple];
}

Aussi dans un jsfiddle https://jsfiddle.net/1sh47wfk/1/

Vous pouvez le découper et ajouter automatiquement en javascript autant de toiles plus petites que nécessaire et dessiner les éléments sur le canevas approprié. Il se peut que vous manquiez encore de mémoire, mais vous obtiendriez la limite du canevas unique.

Je ne sais pas comment détecter la taille maximale possible sans itération, mais vous pouvez détecter si une taille de toile donnée fonctionne en remplissant un pixel, puis en lisant la couleur. Si le canevas n'a pas été rendu, la couleur que vous récupérez ne correspondra pas. W

code partiel:

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}
var test_colour = '8ed6ff';
working_context.fillStyle = '#' + test_colour;
working_context.fillRect(0,0,1,1);
var colour_data = working_context.getImageData(0, 0, 1, 1).data;
var colour_hex = ("000000" + rgbToHex(colour_data[0], colour_data[1], colour_data[2])).slice(-6);