[Resolvido] uma forma de usar vários objetos dentro de um só canvas

Minha primeira dúvida é sobre criações de tiles em JavaScript dentro de um canvas. Inicialmente sei que o tiles precisam ser configurados por uma array

t = [
[0,0,0],
[0,0,0],
[0,0,0]
];

E tenho mais variáveis que seriam

ts = 100; // Tamanho do tile
tr = t.length; // Quantidade de linhas
tc = t[0].length; // Quantidade de Colunas

E sei que preciso montar essas informações em dois for um dentro do outro mas é nessa parte que estou tendo problemas, gostaria que alguém pudesse me ajudar.

Minha segunda dúvida é sobre a criação de mais de um objeto dentro do canvas um exemplo.

ctx.fillRect(50,20,20,20);
x = 0;
function loop(){
x += 1;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillRect(x,0,20,20);
}
setInterval('loop()',0);

Podem ver que criei 2 quadrados no mesmo canvas e um deles está dentro de um loop que coloca +1 a x cada 0 milissegundo criando assim uma "ideia" de movimento redesenhando o bloco na nova posição mas o que acontece é que ele deixa um rastro e para que não deixe precisamos limpar o canvas com a clearRect já tentei por exemplo fazer com que ele só limpe a parte em que o bloco passa subtraindo a posição do bloco - 1.

ctx.fillRect(50,20,20,20);
x = 0;
function loop(){
x += 1;
ctx.clearRect(x - 1,0,20,20);
ctx.fillRect(x,0,20,20);
}
setInterval('loop()',0);

Mas teria grandes problemas se fosse mudar a direção do objeto e quando ele passa sobre outro objeto ele corta o outro por cima. :(

Então na minha ultima dúvida gostaria que vocês me explicassem uma forma de usar vários objetos dentro de um só canvas sem que eu tenha problemas em ter que limpar todo o canvas pra redesenhar o objeto, obrigado a quem poder me ajudar.