Tag Archives: DOM


Many years ago I wanted to make a platform game (I still do) and I needed to be able to make simple and small graphics quickly and easily. Once I realised I could manipulate images using PHP it became easy to create a simple application to make pixel art.


Live page
GitHub repository


The user can create an image pixel by pixel, or with rectangles of colour, or using a simple fill function. The pixel data are stored in an array and when the user asks for the image to be generated the data set sent via a POST request to the server, which then interprets the data and returns a png file.

The drawing area is arranged as an HTML table with event listeners waiting for user input. There is also a thumbnail display that consists of a similar table with cells 1px in width and 1px in height. The user can choose the colour, and choose which “brush” to use (brush, line, rectangle, fill).


Challenge: The page needs to able to respond to the user’s interactions quickly and efficiently.
Solution: The user interaction is handled with a series of automatically generated eventListeners which parse element ids. This works well enough, but it really needs to be replaced with a single event listener and handled with a single element instead of a large array of elements that take up more CPU time and memory. This can be handled by using the canvas instead of an HTML table. (Resolved, to be replaced)
Challenge: The image needs to be generated for the user.
Solution: At the moment the painter uses PHP to generate an image pixel by pixel. This is a very inefficient way to generate the image, as it requires a large bandwidth and for very large images, a lot of server CPU time. This should be replaced with client side processing to remove these uncesseary overheads. (Resolved, to be replaced)
Challenge: The user needs to be able to select a colour from a rich palette.
Solution: This project made me realise how difficult working with colours spaces is. A full colour space can’t be easily represented in two dimensions, so I need to create a colour cube and show slices, making the space somewhat counter intuitive. It works, but it would be nice to develop other respresentations. As with the drawing space, the colour palette should be replaced by a single canvas element. (Resolved, to be revisted)


A screenshot of the painter (with some horizontal stretching)
A screenshot of the painter (with some horizontal stretching)