Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

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.
canvas2d.png


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:
<canvas id="canvas<%= p.getId() %>" width="128" height="128" style="border: 1px solid silver;"></canvas>


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:
<script>
var c=document.getElementById("canvas<%= p.getId() %>");
var ctx=c.getContext("2d");
ctx.fillStyle="#000000";
ctx.fillRect(0,0,128,128);
ctx.fillStyle="#FFFFFF";
...jsp code to generate the map pixels...
</script>


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:
out.print("ctx.fillRect(" + x + "," + y + ",1,1);");


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

A quick disclaimer...

Although I put in a great effort into researching all the topics I cover, mistakes can happen. Use of any information from my blog posts should be at own risk and I do not hold any liability towards any information misuse or damages caused by following any of my posts.

All content and opinions expressed on this Blog are my own and do not represent the opinions of my employer (Oracle). Use of any information contained in this blog post/article is subject to this disclaimer.
Hi! You can search my blog here ⤵
NOTE: (2022) This Blog is no longer maintained and I will not be answering any emails or comments.

I am now focusing on Atari Gamer.