How many canvas tags in a Web page?

If we use HTML 5 canvas tags to make widgets, how many can we use without significantly increasing the download time?

For example, we want to create a button with canvas, and have a lot in a web page. Could this slow down the display too much? To verify that the number of canvas tags can be very large, we are going to do an experiment which consists in displaying an image of 100 x 100 pixels at the rate of one Canvas tag per pixel, which makes it 10,000! Most applications would require much less ...
I have to say I have also tried on larger dimensions, but the browser is no longer able to process the source code to produce a page.

The image is translated into 100 rows and 100 columns and the intersection of each is represented by a canvas tag whose size is 4x4 pixels. Of course it is not the optimal way to display an image, but to test the limits of browsers, it is ok!

To generate 10,000 tags, I use a PHP code that extract each pixel of an image and creates a canvas tag corresponding to its color code. Here is this source code:

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

The HTML code:

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

For demonstration purposes, the page has no doctype and is displayed in quirks mode. This allows to present the canvases side by side without spacing between them, on all browsers. In an application, this constraint is useless and we will add the doctype.

In conclusion, if we had a doubt, this experience should reassure us: we can include as much canvas as we want in a web page, browsers will support it without difficulty.