How many Canvas tags are on a webpage

When using HTML 5 tags to create widgets, how many can you use without greatly enlarging the page?

For example, you want to create buttons with canvas and have their number on the page. Could that slow down the display too much? To make sure that the number of Canvas tags can be very large, we will conduct an experiment, which is to display an image of 100 x 100 pixels due to the Canvas tag per pixel, which makes it 10,000! Most apps would require much less...
I must say that I also tried larger dimensions, but the browser can no longer process the source code to create a page.

The image is translated into a table of 100 rows and 100 columns, and the intersection of each of them is represented by a canvas tag measuring 4x4 pixels. Of course, this is not the best way to display a picture, but it is ideal for checking browser boundaries!

To generate 10,000 tags, I use PHP code that extracts each pixel in the image and creates a canvas tag that matches 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>';
    }
  }	
}

HTML code:

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

For demonstration purposes, the page does not have a document and is displayed in quirks mode. This allows you to show canvas next to each other on all browsers. In the application, this limitation is superfluous, and a doctor will be added.

In conclusion, if we had doubts, this experience should reassure us: you can include as many channels as you like in a web page, browsers can withstand without difficulty.