Rendering Graphics in the Browser

An overview of the different methods with which graphics can be rendered to the browser.

fxhash projects are web based generative artworks that display graphics in the browser. We’ve now had a look at all of the tools that fxhash provides to facilitate this endeavour, and also had a look at the fxhash API that provides helper functions to create a compatible generative artwork. Now we still need to discuss some notions that are related to developing a robust generative artwork, that displays itself properly in the canvas, works across different browsers, and implements some user friendly features. These things aren’t directly related to fxhash, but are quite important to get right.

Technologies for Browser Art

There are primarily two technologies to create graphics in the browser, they are:

The HTML Canvas: the html canvas element is a rectangular bitmap area (essentially a raster/grid of pixels) that can be displayed within an HTML page, and allows the control over individual pixels via javascript. It comes with an attached rendering context that provides several useful functions for drawing to that canvas. Most modern generative art makes use of this canvas element and its associated API. Furthermore, many libraries are built on top of this Canvas API that further facilitate the creation of graphics. We will talk in detail about this canvas element in the coming sections.
SVGs - Scalable Vector Graphics: in contrast to the pixel based canvas element, scalable vector graphics are a resolution independent alternative to creating graphics in the browser. SVGs are based on XML and describes 2D graphics in a vector format. An SVG is essentially a document of shapes and paths that can be drawn, and the browser renders it as needed. There are also javascript libraries that facilitate the creation of these SVGs, and make it possible to make art with them, but it is overall a bit trickier than making art with the canvas element.

Important Notions for making Good fxhash projects

In the following sections we will discuss some of the important notions involved in the creation of a generative artwork for fxhash:

The Canvas Element and Canvas API: How to create an HTML canvas element and using with the rendering contexts that the canvas API exposes for drawing graphics onto the canvas element.
Working with Libraries: Including and working with 3rd party libraries.
Responsive Projects: Making responsive generative art, and some of the methods with which the canvas can be resized responsively within the browser window.
Using Randomness Correctly: Using the fxhash randomness correctly and some of the pitfalls that may break the determinism of an fxhash project.
Handling User Input and Different Resolution Export: Handling user input and listening and user interaction, as well as exporting the artwork at various scales in image formats.
Testing Debugging and Browser Compatibility: Testing and making our code compatible with the different modern browsers.

← Previous

Params Definition Specifications

Canvas Element and Canvas API