Como usar seu próprio mapa (jpg) em um grid de tilemaps?

Front-end
#1

Pessoal, estou com uma dúvida de como renderizar em um canvas uma imagem de um mapa que desenhei.

Estou seguindo esse tutorial aqui: http://buildnewgames.com/astar/

Meu projeto consiste em fazer um mapa de um ambiente interno e por meio do algoritmo A Star, realizar o menor caminho entre um ponto A e B.

Pelo código do tutorial entendi como ele renderiza o mapa (usando fors encadiados).

function createWorld() {

// create emptiness
for (var x=0; x < worldWidth; x++)
{
	world[x] = [];

	for (var y=0; y < worldHeight; y++)
	{
		world[x][y] = 0;
	}
}

// scatter some walls
for (var x=0; x < worldWidth; x++)
{
	for (var y=0; y < worldHeight; y++)
	{
		if (Math.random() > 0.75)
		world[x][y] = 1;
	}
}

No meu caso, quero fazer exatamente os quadros do meu mapa e assim dizer quais o quadros que são ruas (para utilizar a função de traçar menor rota).

E não somente com 0 (zeros) e 1(ums) randomicamente.

Alguém sabe me dizer como fazer isso?

Obrigado!