Layering canvas objects on JPEG's - JavaScript -

i creating maze game , far have rendered circle player move , loaded maze jpeg. when 2 overlap circle hidden jpeg, what method allows 2 objects overlapped?

question 2 have created 10 x 10 table cell id's 1 - 100 , put these values in array. game need check id of square player wants progress , see if can go there. use hash table lookup or how can this?

question #1:

the last drawn object on top, draw maze first , player second.

question #2:

it might easier lay out cells in 2-dimensional array:

// note: these example numbers not form valid maze :-)  var maze=[     [0,0,1,0,0,1,1,0,0,1],     [0,0,1,0,0,1,1,0,0,1],     [0,0,1,0,0,1,1,0,0,1],     [0,0,1,0,0,1,1,0,0,1],     [0,0,1,0,0,1,1,0,0,1],     [0,0,1,0,0,1,1,0,0,1],     [0,0,1,0,0,1,1,0,0,1],     [0,0,1,0,0,1,1,0,0,1],     [0,0,1,0,0,1,1,0,0,1],     [0,0,1,0,0,1,1,0,0,1], ]; 

...and define character's position x,y coordinate:

var playerx=5; var playery=5; 

then can examine each cell neighboring player this:

var north=maze[ playerx,   playery-1 ]; var south=maze[ playerx,   playery+1 ]; var east=maze[  playerx+1, playery ]; var west=maze[  playerx-1, playery ]; 

...and allow/disallow moves accordingly.

but if want use single-array, can convert cell 0-99 x,y this:

var cell=50;  var cellwidth=10;  var y=cell/cellwidth;  var x=cell-y*cellwidth; 

...and convert x,y cell 0-99 this:

var cell=y*cellwidth+x;