Как сделать наложение текстур на объекты [dom]?

Question

Лука Печков @CoffeeAndNews

Как сделать наложение текстур на объекты [dom]?

Здравствуйте! Недавно нашел один из проектов - игра "змейка".
Так вот, возникла какая-то проблема с наложением текстур на объекты.
Я просто не понимаю, как это сделать =)

Подскажите со скриптами пожалуйста=)

Сначала идет html5:

<canvas id="playMap" width="480" height="360">Sorry, but your browser does not support HTML5 
Update your browser or install other</canvas>

Ничего сложно в этом нет.

Вот файлик main.js

window.onload = function Loading(){
	loadng();
	random_food();
	game_speed();
}

function loadng() 
{
		var snake_sp = 105;
		var gameWidth = 48; 
		var gameHight = 36; 
		var scor = 2;
		var snake_color = "#E5DEB5"; 
		var ctx; 
		var tn = []; 
		var x_dir = [-1, 0, 1, 0];
		var y_dir = [0, -1, 0, 1];
		var queue = []; 
		var food = 1;
		var food_color = "#DB8F56";
		var map = [];
		var MR = Math.random; 
		var X = 5 + (MR() * (gameWidth - 10))|0;
		var Y = 5 + (MR() * (gameHight - 10))|0;
		var direction = MR() * 3 | 0; 
		var interval = 0;
		var score = 0;
		var sum = 0, easy = 0;
		var i, dir;
		var enemy;
		var ctxEnemy;
		var map = document.getElementById('playMap');
		ctx = map.getContext('2d');

		var tiles = new Image();
		title.res = "img/title.png";

		for (j = 0; j < gameWidth; j++)
		{
			map[j] = [];
		}

		enemy = document.getElementById(enemy);
		ctxEnemy = enemy.getContext("2d");
		function random_food() 
		{
			var x, y;
			do 
			{
				x = MR() * gameWidth|0;
				y = MR() * gameHight|0;
			} 
			while (map[x][y]);
			map[x][y] = 1;
			ctx.fillStyle = snake_color;
			ctx.strokeRect(x * 10+1, y * 10+1, 8, 8);
		}

		random_food();
		enemy;

	function enemy(){
		ctxMap.drawImage(tiles, 0, 0, 0, 0, 
			0, 0, gameWidth,gameHight);
	}
		function game_speed() 
		{
			if (easy) 
			{
				X = (X+gameWidth)%gameWidth;
				Y = (Y+gameHight)%gameHight;
			}
			--scor;
			if (tn.length) 
			{
				dir = tn.pop();
				if ((dir % 2) !== (direction % 2)) 
				{
					direction = dir;
				}
			}
			if ((easy || (0 <= X && 0 <= Y && X < gameWidth && Y < gameHight)) && 2 !== map[X][Y]) 
			{
				if (1 === map[X][Y]) 
				{
					score+= Math.max(2*2, scor);
					scor = 2;
					random_food();
					food++;
				}
				ctx.fillRect(X * 10, Y * 10, 9, 9);
				map[X][Y] = 2;
				queue.unshift([X, Y]);
				X+= x_dir[direction];
				Y+= y_dir[direction];
				if (food < queue.length) 
				{
					dir = queue.pop()
					map[dir[0]][dir[1]] = 0;
					ctx.clearRect(dir[0] * 10, dir[1] * 10, 10, 10);
				}
			} 
			else if (!tn.length) 
			{
				var msg_score = document.getElementById("scoreMessage");
				msg_score.innerHTML = "Мы рады,что вы поиграли в нашу игру=).<br /> Ваши очки: <b>"+score+"<br>"+"Умножено на 2"+"</b><br /><br /><input type='button' class='btn' value='Сыграть еще раз' onclick='window.location.reload();' />";
				document.getElementById("playMap").style.display = 'none';
				document.getElementById("p2").style.display = 'none';
				document.getElementById("p").style.display = 'none';
				document.getElementById("title").style.display = 'none';
				window.clearInterval(interval);
			}
		}
		interval = window.setInterval(game_speed, snake_sp);
		document.onkeydown = function(z) {
			var code = z.keyCode - 37;
			if (0 <= code && code < 4 && code !== tn[0]) 
			{
				tn.unshift(code);
			} 

			else 
			{ 
				dir = sum;
				if (dir == 44||dir==94||dir==126||dir==171) 
				{
					sum
				} else if (dir === 218) easy = 0;
			}
		}
}

Помогите, пожалуйста, кто сможет! =)
Мне нужны точные функции, с помощью которых можно это сделать.
И желательно пример кода.