Combien de balises Canvas dans une page Web?

Si on utilise des balises canvas HTML 5 pour réaliser des widgets, combien peut-on en utiliser sans trop alourdir la page?

Par exemple, on veut créer des boutons avec canvas et en avoir une quantité dans la page. Cela peut-il ralentir l'affichage de façon trop importante? Pour vérifier que le nombre de balises canvas peut être très grand, on va faire une expérience qui consiste à afficher une image de 100 x 100 pixels à raison d'une balise Canvas par pixel, ce qui en fait 10000! La plupart des applications en nécessiteraient beaucoup moins...
Je dois dire que j'ai aussi essayé sur des dimensions plus grandes, mais le navigateur ne parvient plus à traiter le code source pour produire une page.

L'image est traduite en tableau de 100 lignes et 100 colonnes et l'intersection de chacune est représentée par une balise canvas dont la taille est de 4x4 pixels. Bien sûr, ce n'est pas le moyen optimal d'afficher une image, mais pour tester les limites des navigateurs, c'est parfait!

Pour générer les 10000 balises, j'utilise un code PHP qui extraie chaque pixel d'une image et crée une balise canvas correspondant à son code de couleur. Voici ce code source:

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

Le code HTML:

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

Pour les besoins de la démonstration, la page n'a pas de doctype et s'affiche en mode quirks. Cela permet de présenter les canvas côte à cote sans espacement entre eux, sur tous les navigateurs. Dans une application, cette contrainte est superflue et on ajoutera le doctype.

En conclusion, si on avait un doute, cette expérience doit nous rassurer: on peut inclure autant de canvas que l'on veut dans une page web, les navigateurs le supporteront sans difficulté.