Generating Bitmap Images On The Fly For Canvas in Javascript

When we develop games or different tools we have to generate images on the fly or to alter existing images. In plain javascript we don’t have an existing Bitmap class and we don’t really need it. We have to perform the following operations:

Let’s start creating a canvas object. We can create directly in the html using canvas tag or we can create it dynamically using javascript code:

Once we have the canvas in place we need to get the imagedata object from the canvas. The imagedata is copy of what is displayed on canvas. We need first to get the canvas context which returns a new ImageData object compatible with the canvas. If we need to modify the existing image displayed in Canvas we can get a copy of the existing canvas:

 

The imagedata which is returned contains an array of bytes of values 0 – 255. Each pixel is represented by four values for red, green, blue and alpha. The length of the array is width * height. In order to access the pixel at x, y we need the 4 values stored at (x + y * width).

After we change the pixels as we want we need to put the imagedata back in to the canvas, using it’s context:

In the following section we create a canvas object and display a generated chess table pattern in it entirely javascript. We are using the following code to fill alternating rectangles, directly in the imagedata before putting it in the canvas:

Here is the code in action:

Leave a Reply

Your email address will not be published. Required fields are marked *