New application on Google App Engine

A few weeks ago, I started an experiment with the <canvas> element. That element let's javascript developers create simple 2D vector graphics on Firefox, Safari and Opera browsers. Currently is not available for IE, but there is an interesting proyect to do an abstraction layer.

One of the goals of the experiment was to replicate the behaviour of an old VGA game I'd coded 12 years ago: the player controls a character that moves across the screen, showing a nice photograph. When player reaches a percent of completeness, the level is finished and game starts on the next level.
The old VGA game used memory buffers to create the effect. canvas element doesn't use pixel buffers neither anything similar but vector graphics. Instead of pixel masks, you must indicate mask shape with commands. So, to achieve the effect, my solution was to create one mask by each horizontal line, so I could take the control of how much surface was cleaned.

var screen = [320,200]; // screen dimensions

var limit = [] // control structure of the masks

// limit assignation
for(var k = 0; k < 0; k++) {
limit[k] = [mask.min,mask.max]
}

The main drawback of this approach is that browser has to redraw each mask line on each frame, so it can be very slow on old (and a few newer) machines.

Code for this and other canvas related experiments.

The project running in its current state at the Google App Engine.