Create A Page That Takes Data And Turns It Into Images?

I'm trying to create a page that takes data and turns it into images - I'm starting very simply. For each row of text, I first:

if(j.match(/[a-z]+_\d+/)){
colorval='red';
} else {
colorval='blue';
}

then I add a sequence of numbers for positioning to an object called pixs (with a numerical index as well that may or may not be useful):

var xpos = startwidth+d_num;
var ypos= startheight+d_scroll;
pixs[num]= {};
pixs[num]['xpos']=xpos;
pixs[num]['ypos']=ypos;
pixs[num]['color']=colorval;

As I loop through my arrays of little pieces of data, all of this information is stocked into pixs - BUT then- I have to insert this information from pixs to a function, like:

$(container).fillRect(xpos,ypos, width, height, {color: color}) where width and height are each preset vars.

My challenges here are to 1) successfully loop through the pixs object. 2)Use jquery if possible (or if easier) to get these variable values into the function to evaluate. 3) Successfully '.fillRect' with each loop. 4) Use the append method (or something?! again, I am a n00b) to get all of these instances of fillRect onto the container in the html document (which appears to be set up and working with instances of fillRect not using variables as parameters)