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. To verify that this number may be very large, we will make an experience that is to display an image of 100 x 100 pixels with one pixel by Canvas tag, making 10,000! Most applications do not actually use more than a few dozen ...
I must say that I also tried on larger sizes, but the browser can no longer display the source code.
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. Here is this code:
$img = imagecreatefrompng($url);
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:
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.