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

NOTE: This article is 3 years or older so its information may no longer be relevant. Read on at your own discretion! Comments for this article have automatically been locked, refer to the FAQ for more details.
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

Hope you found this post useful...

...so please read on! I love writing articles that provide beneficial information, tips and examples to my readers. All information on my blog is provided free of charge and I encourage you to share it as you wish. There is a small favour I ask in return however - engage in comments below, provide feedback, and if you see mistakes let me know.

If you want to show additional support and help me pay for web hosting and domain name registration, donations, no matter how small, are always welcome!

Use of any information contained in this blog post/article is subject to this disclaimer.
comments powered by Disqus
Other posts you may like...