[JsLoveR]

Я говорю о том, что раз змейка отрисовывается на canvas надо использовать методы canvas и тупо смотреть закрашена ли область.

и я о том, что-то вроде такого:

<script type="text/javascript">

var canvas = null;
var ctx = null;

function createRect(x, y, width, height, color) {
	ctx.fillStyle = color;
	ctx.fillRect(x, y, width, height);
}

function randomFood() {
	var randX = Math.floor(Math.random() * canvas.width / 30);
	var randY = Math.floor(Math.random() * canvas.height / 30);
	var block = ctx.getImageData(randX * 30, randY * 30, 1, 1);
	createRect(randX * 30, randY * 30, 30, 30, "#FF9900");
	if(block.data[0] == 153 && block.data[1] == 204 && block.data[2] == 0 && block.data[3] == 255) {
		alert("Попали на змейку!");
	}
}

window.onload = function(e){
	canvas = document.getElementById('map');
	ctx = canvas.getContext("2d");
	createRect(30, 30, 30, 30, "#99CC00");
	createRect(60, 30, 30, 30, "#99CC00");
	createRect(30, 60, 30, 30, "#99CC00");
	createRect(90, 30, 30, 30, "#99CC00");
	createRect(120, 30, 30, 30, "#99CC00");
	createRect(150, 30, 30, 30, "#99CC00");
	createRect(150, 60, 30, 30, "#99CC00");
	createRect(150, 90, 30, 30, "#99CC00");
	createRect(150, 120, 30, 30, "#99CC00");
}

</script>
<canvas id="map" width="200" height="200" style="border:1px solid #999999; float:left"></canvas>
<button onclick="randomFood()" style="float:left">Генерировать еду</button>

Но лучше использовать, наверное, стандартный подход ) Пробегать по массиву координат змейки, ведь там 1 цикл.