Not so long ago I wrote a small JSP page for my GAE based game that displayed all of the players and their basic stats plus an image representing their game map. This worked great on the development server, but on the production server no maps were being generated. Why? Because Google does not permit ImageIO classes to run on their servers. I started looking for other libraries to implement the same functionality and sadly didn't find much. So my solution was to do it in HTML5 instead.

This is the kind of output I was generating. Very simple, just a quick overview of basic player stats.


Here's how I got it working...


First thing was making a JSP page, I will not show the specific code here, the important thing is for the HTML to have a <canvas> object. For me it looked like this:


I added a 1 pixel silver border around a 128x128 canvas.

Something to notice here is the id of this canvas object starts with 'canvas' and then has the p.getId() appended, the last bit is how I get the player ID, but what this really does is makes the canvas object unique so I know which one to draw into in the JavaScript I have.

The outline of the JavaScript is like this:


The first thing I do is get the canvas element by the ID that I've set to it and then get the "2D" object from that, this is where I can start drawing.

First I set the colour to black and fill the entire canvas, this is the background, then I set the colour to white. Each of the pixels I draw is coloured white in my case.

Then I have some code that fetches my map data from the data store, I didn't include this code since it's not relevant, however inside this code I have a line like this:


That line simply draws a 1x1 rectangle at the (x, y) coordinate.

The end result is all of the points on my map are drawn as white pixels, no ImageIO is used and the image is rendered directly by the browser.

-i