Как определить, не работает ли canvas в Chrome?

Question

В нашем продукте мы столкнулись с проблемой, когда иногда создается холст, превышающий пределы, установленные браузерами (я получил ограничения от этого вопроса ).

При попыткечтобы придумать способ предупредить пользователей или хотя бы спасти операцию, я хотел посмотреть, смогу ли я обернуть инициализацию canvas в оператор try / catch, что-то вроде этого:

createCanvas = function() {
  var element = document.createElement("canvas");
  element.id = "canvasId";
  document.getElementById("container").appendChild(element);
  return element;
};

tryToCreateCanvas = function() {
  var width = document.getElementById("widthInput").value;
  var height = document.getElementById("heightInput").value;
  var element = createCanvas();
  try {
    element.width = width;
    element.height = height;
    var context = element.getContext("2d");
    context.scale(width, height);
    document.getElementById("result").innerHTML = "Success!";
  } catch (e) {
    document.getElementById("result").innerHTML = "Failure!";
  }
};

в firefoxсоздание слишком большого холста вызывает исключение, и все работает правильно.

Однако Chrome вылетает холст (показывает значок нехватки памяти), но не выдает исключение, поэтому я нене знаю, как уловить тот факт, что холст не удалось создать.

Таким образом, в основном код выше покажет Успех в Chrome / Opera, Отказ в Firefox, и оба холста не работают.

Кто-нибудь знает надежный способ проверить работоспособность холста в Chrome?

Я создал эту скрипку , чтобы проиллюстрировать, что происходит

Answer 1

Вы можете просто попытаться нарисовать что-то на этом холсте и проверить, сработало ли это, прочитав пиксели, используя ctx.getImageData:

const ctx = canvas.getContext('2d');
size.onchange = e => {
  const newSize = +size.value;
  console.log(newSize + ' x ' + newSize, testValidSize(newSize));
};
size.onchange();

function testValidSize(width, height = width) {
  try {
    canvas.width = width;
    canvas.height = height;
    ctx.fillRect(0,0,1,1);  // fill a single pixel
    // check its alpha value
    const supported = !!ctx.getImageData(0,0,1,1).data[3];
    ctx.clearRect(0,0,width,height); // clean
    return supported;
  }
  catch(e) {
    return false;
  }

}

<input type="number" value="50000" id="size">
<canvas id="canvas"></canvas>

Но будьте осторожны, на очень большом холсте у вас может быть много медлительности, даже если вы можете рисовать на холсте.