Сколько тегов Canvas на веб-странице

?

При использовании тегов HTML 5 для создания виджетов, сколько их можно использовать, не сильно увеличивая страницу?

Например, ты хочешь создать кнопки с канвасом и иметь их количество на странице. Может ли это слишком сильно замедлить показ? Чтобы убедиться, что количество тегов Canvas может быть очень большим, мы проведем эксперимент, который заключается в отображении изображения 100 x 100 пикселей из-за тега Canvas на пиксель, что делает его 10000! Большинство приложений потребовало бы гораздо меньше...
Надо сказать, что я тоже пробовал более крупные измерения, но браузер уже не может обрабатывать исходный код для создания страницы.

Изображение переводится в таблицу из 100 строк и 100 колонок, а пересечение каждой из них представлено тегом canvas размером 4x4 пикселей. Конечно, это не оптимальный способ отображения картинки, но для проверки границ браузеров это идеально !

Для генерации 10000 тегов я использую PHP-код, который извлекает каждый пиксел изображения и создает тег canvas, соответствующий его цветовому коду. Вот этот исходный код: 

function imageToCanvas($url)
{
  $img = imagecreatefrompng($url);
  $str="";
  $w=imagesx($img); 
  $h=imagesy($img); 
  for($y = 0; $y < $h; $y++)
  {
    for($x = 0; $x < $w; $x++)
    {
      $c = imagecolorat($img, $x, $y);
      echo '<canvas style="background:#'.dechex($c).'"></canvas>';
    }
  }	
}

HTML-код:

<div class="board">
<?php imageToCanvas("vacances.png");?>
</div>

Для демонстрационных целей страница не имеет документа и отображается в режиме quirks. Это позволяет показывать канвы рядом друг с другом на всех браузерах. В приложении это ограничение лишнее, и будет добавлен доктор.

В заключение, если у нас были сомнения, этот опыт должен нас успокоить: можно включить в веб-страницу сколько угодно канв, браузеры выдержат без труда .