Written by Ramón Saquete
The HTML5 canvas element is a major advance in the graphical aspect of the Web. Its possibilities are endless, so before we get into it, I will expose a few examples of using this HTML5 canvas, but keep in mind that the limit of this technology is only in the imagination:
- You can make an animation that encourages you to play with the mouse over a buy button.
- It allows products to be displayed in three dimensions, where the user can interact with a “crystal ball” type interface to see them in detail.
- It can be used to display photo galleries with transitions impossible with any other technology.
- To run multiplayer online video games.
- To make animations that would make a fool of any of those made with Flash.
Random procedural texture.
Reload the page to regenerate.
In addition to all that, as the title of this entry says, it also serves to generate procedural textures, or in other less technical terms, to generate images through code.
Textures on the Web are always used within decorative elements such as button backgrounds, page backgrounds or content blocks and, in general, elements that do not help positioning, but on the contrary, slow down page loading time. These textures can usually be generated with an algorithm using the canvas element, as long as we have enough JavaScript, graphics programming and mathematics to carry it out.
The main advantage of generating images using code in the browser, is that these images are take up practically nothingThe images do not actually exist, so the browser does not have to request them from the server and wait for them to download, and they only take up a few bytes along with the rest of the Javascript code on the page. Moreover, they can be virtually infinite in size. There is no need to have a pattern that repeats over and over again, or sacrifice page load time to have a huge background image that takes up the size of any monitor. On the other hand, if what we want is to have a repeating pattern, it can be implemented in the same way.
Another advantage of procedural textures is that we are not limited by the applications that the designer can use to generate textures. It is the programmer who performs the task of designing and who has the ability to fine-tune the desired visual appearance with his code, beyond what a designer could do with tools programmed in the usual software design packages, where only preset parameters can be played with.
However, it is not all advantages. There are two drawbacks. The first is that if the code is not sufficiently optimized, or the complexity of the texture does not allow for optimization, then the texture image may take too long to generate on the page. On the bright side, if this problem occurs, the computational effort of generating the texture would have to be done by the client’s processor and not the server, so it would not affect the overall performance of the Web, just the image will take a few seconds longer to appear. Other server technologies used to generate images, such as CAPTCHAS, do negatively affect overall server performance.
The other problem with the canvas element is not really a problem either, it is that from the old Internet Explorer 8 downwards this technology is not supported, although we can make IE8 support it with a Google JavaScript. However, this does not allow the ability to paint at the pixel level, which is the most useful feature, to work. Therefore, for IE8, the best thing to do is what the web developers we call a “graceful downgradeThe image is a graceful gradient to a version that displays a normal image and, when in one of these unfortunate Microsoft browsers, will be loaded in place of the procedural texture. Another alternative is to urge the IE8 user to install a Google plugin, the Chrome Frame, which will make IE8 support this technology, but it is preferable not to bother the user with plugins as what they will do is leave the page. Fortunately, from version nine onwards this technology is now supported, albeit more slowly than in other browsers and without hardware acceleration support for WebGL.
The canvas is not just a canvas on which to paint, but a canvas that can be integrated with the Web using transparencies and above all that can be generated in a hidden way. The latter is then used to read the generated image in the form of a Data URI, which we can assign to the background-image property of CSS, the src attribute of an IMG element or the href attribute of a link like thisIn which if you click, you can see a procedural texture that I have generated by applying a cosine to a Perlin noise function, so you can see an example.
Due to the complexity required to create the libraries to implement and generate these types of textures with the canvas element, it will still be a long time before they start to be seen on a regular basis.
