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

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!