Estoy trabajando con un elemento de lienzo con una altura de 600a 1000píxeles y un ancho de varias decenas o cientos de miles de píxeles. Sin embargo, después de una cierta cantidad de píxeles (obviamente desconocido), el lienzo ya no muestra las formas que dibujo con JS.

¿Alguien sabe si hay un límite?

Probado tanto en Chrome 12 como en Firefox 4.

Actualizado 13/10/2014

Todos los navegadores probados tienen límites en la altura / ancho de los elementos del lienzo, pero muchos navegadores también limitan el área total del elemento del lienzo. Los límites son los siguientes para los navegadores que puedo probar:

Cromo:

Alto / ancho máximo: 32,767 píxeles Área máxima: 268,435,456 píxeles (por ejemplo, 16,384 x 16,384)

Firefox:

Alto / ancho máximo: 32,767 píxeles Área máxima: 472,907,776 píxeles (por ejemplo, 22,528 x 20,992)

ES DECIR:

Alto / ancho máximo: 8.192 píxeles
Área máxima: N / A

IE móvil:

Alto / ancho máximo: 4096 píxeles
Área máxima: N / A

Otro:

No puedo probar otros navegadores en este momento. Consulte las otras respuestas en esta página para conocer los límites adicionales.

Exceder el largo / ancho / área máxima en la mayoría de los navegadores hace que el lienzo sea inutilizable. (Ignorará cualquier comando de dibujo, incluso en el área utilizable). IE e IE Mobile respetarán todos los comandos de dibujo dentro del espacio utilizable.

Me encontré con errores de falta de memoria en Firefox con alturas de lienzo superiores a 8000, Chrome parece manejar mucho más alto, al menos a 32000.

EDITAR: Después de ejecutar algunas pruebas más, encontré algunos errores muy extraños con Firefox 16.0.2.

Primero, parece que obtengo un comportamiento diferente del lienzo en memoria (creado en javascript) en comparación con el lienzo declarado en html.

En segundo lugar, si no tiene la etiqueta html y el metajuego de caracteres adecuados, el lienzo puede estar restringido a 8196; de lo contrario, puede subir hasta 32767.

En tercer lugar, si obtiene el contexto 2d del lienzo y luego cambia el tamaño del lienzo, es posible que también esté restringido a 8196. Simplemente establecer el tamaño del lienzo antes de tomar el contexto 2d le permite tener hasta 32767 sin errores de memoria.

No he podido obtener los errores de memoria de manera constante, a veces es solo en la carga de la primera página, y luego funcionan los cambios de altura posteriores. Este es el archivo html que estaba probando con http://pastebin.com/zK8nZxdE .

Tamaño máximo del lienzo de iOS (ancho x alto):

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

probado en marzo de 2014.

Para ampliar un poco la respuesta de @FredericCharette: según la guía de contenido de Safari en la sección "Conozca los límites de recursos de iOS":

El tamaño máximo de un elemento de lienzo es de 3 megapíxeles para dispositivos con menos de 256 MB de RAM y 5 megapíxeles para dispositivos con más o menos de 256 MB de RAM

Por lo tanto, cualquier variación de tamaño de 5242880 (5 x 1024 x 1024) píxeles funcionará en dispositivos de memoria grandes; de lo contrario, son 3145728 píxeles.

Ejemplo de lienzo de 5 megapíxeles (ancho x alto):

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

y así..

Los lienzos CUADRADOS más grandes son ("MiB" = 1024x1024 Bytes):

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

Actualización para 2018:

A medida que avanza el tiempo, las limitaciones de los lienzos han cambiado. Lamentablemente, lo que no ha cambiado es el hecho de que los navegadores aún no brindan información sobre las limitaciones de tamaño del lienzo a través de la API de Canvas.

Para aquellos que buscan determinar mediante programación el tamaño máximo del lienzo del navegador o probar la compatibilidad con dimensiones de lienzo personalizadas, consulte el tamaño del lienzo .

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

De los documentos:

El elemento de lienzo HTML es ampliamente compatible con los navegadores modernos y heredados, pero cada combinación de navegador y plataforma impone limitaciones de tamaño únicas que inutilizarán un lienzo cuando se exceda. Desafortunadamente, los navegadores no proporcionan una forma de determinar cuáles son sus limitaciones, ni brindan ningún tipo de retroalimentación después de que se ha creado un lienzo inutilizable. Esto hace que trabajar con elementos de lienzo grandes sea un desafío, especialmente para aplicaciones que admiten una variedad de navegadores y plataformas.

Esta microbiblioteca proporciona el área, la altura y el ancho máximos de un elemento de lienzo HTML admitido por el navegador, así como la capacidad de probar dimensiones de lienzo personalizadas. Al recopilar esta información antes de que se cree un nuevo elemento de lienzo, las aplicaciones pueden establecer de manera confiable las dimensiones del lienzo dentro de las limitaciones de tamaño de cada navegador / plataforma.

Un enlace de demostración y los resultados de las pruebas están disponibles en el archivo README , así como una sección de problemas conocidos que trata sobre el rendimiento y las consideraciones de la máquina virtual.

Divulgación completa, soy el autor de la biblioteca. Lo creé en 2014 y recientemente revisé el código para un nuevo proyecto relacionado con el lienzo. Me sorprendió encontrar la misma falta de herramientas disponibles para detectar limitaciones de tamaño de lienzo en 2018, así que actualicé el código, lo publiqué y espero que ayude a otros a encontrar problemas similares.

De acuerdo con las especificaciones de w3 , la interfaz de ancho / alto es un largo sin firmar, por lo que de 0 a 4,294,967,295 (si recuerdo bien ese número, podría estar fuera de algunos).

EDITAR: Extrañamente, dice unsigned long, pero la prueba muestra solo un valor largo normal como máximo: 2147483647. Jsfiddle - 47 funciona pero hasta 48 y vuelve a los valores predeterminados.

Aunque el lienzo te permitirá poner altura = 2147483647, cuando comiences a dibujar, no pasará nada

El dibujo ocurre solo cuando devuelvo la altura a 32767

iOS tiene diferentes límites.

Usando el simulador de iOS 7 pude demostrar que el límite es de 5 MB de esta manera:

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

pero si levanto el tamaño del lienzo en una sola fila de píxeles:

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

En PC
: no creo que haya una restricción, pero sí, puede salir de la excepción de memoria.

En dispositivos móviles:
aquí están las restricciones para el lienzo para dispositivos móviles: -

El tamaño máximo de un elemento de lienzo es de 3 megapíxeles para dispositivos con menos de 256 MB de RAM y 5 megapíxeles para dispositivos con más o igual de 256 MB de RAM.

Entonces, por ejemplo, si desea admitir el hardware más antiguo de Apple, el tamaño de su lienzo no puede exceder los 2048 × 1464.

Espero que estos recursos le ayuden a salir adelante.

Las limitaciones de Safari (todas las plataformas) son mucho menores.

Limitaciones conocidas de iOS / Safari

Por ejemplo, tenía un búfer de lienzo de 6400x6400px con datos dibujados en él. Al rastrear / exportar el contenido y al probar en otros navegadores, pude ver que todo estaba bien. Pero en Safari, omitiría el dibujo de este búfer específico en mi contexto principal.

Traté de averiguar el límite mediante programación: estableciendo el tamaño del lienzo a partir de 35000, reduciendo en 100 hasta que se encuentre un tamaño válido. En cada paso, escriba el píxel inferior derecho y luego lo lea. Funciona con precaución.

La velocidad es aceptable si cualquiera de anchura o altura se establece en un valor bajo (por ejemplo 10-200.) De esta manera: get_max_canvas_size('height', 20).

Pero si se llama sin ancho o alto get_max_canvas_size(), el lienzo creado es tan grande que leer el color de UN SOLO píxel es muy lento y, en IE, se bloquea gravemente.

Si esta prueba similar se pudiera realizar de alguna manera sin leer el valor de los píxeles, la velocidad sería aceptable.

Por supuesto, la forma más fácil de detectar el tamaño máximo sería alguna forma nativa de consultar el ancho y la altura máximos. Pero Canvas es 'un estándar de vida', por lo que puede que llegue algún día.

http://jsfiddle.net/timo2012/tcg6363r/2/ (¡Tenga en cuenta que su navegador puede bloquearse!)

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;
  }
}

Cuando utiliza lienzos WebGL, los navegadores (incluidos los de escritorio) impondrán límites adicionales en el tamaño del búfer subyacente. Incluso si su lienzo es grande, por ejemplo, 16 000 x 16 000, la mayoría de los navegadores generarán una imagen más pequeña (digamos 4096 x 4096) y la ampliarán. Eso podría causar un pixelado feo, etc.

He escrito un código para determinar ese tamaño máximo usando una búsqueda exponencial, si alguien lo necesita. determineMaxCanvasSize()es la función que le interesa.

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];
}

También en un jsfiddle https://jsfiddle.net/1sh47wfk/1/

Puede dividirlo y en javascript agregar automáticamente tantos lienzos más pequeños como sea necesario y dibujar los elementos en el lienzo apropiado. Es posible que aún se quede sin memoria eventualmente, pero llegará al límite de un solo lienzo.

No sé cómo detectar el tamaño máximo posible sin alteración, pero puede detectar si un tamaño de lienzo determinado funciona rellenando un píxel y luego leyendo el color de nuevo. Si el lienzo no se ha renderizado, el color que obtenga no coincidirá. W

código parcial:

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);