JavaScript Failed to execute 'getImageData' ...

Hallo Leute :)

Ich hab ein Problem in einem JavaScript das ich heute programmiert habe um in einem simuliert dreidimensionalen Canvas ein angeklicktes Objekt zu bestimmen.
Dazu wollte ich ein off-screen Canvas anlegen in dem ich die Umrisse der Objekte 2D nachzeichne und ausfülle. Dabei verwende ich für jedes einzelne Objekt einen anderen Farbcode der dann nachher beim Klick ausgelesen und einem Objekt zugeordnet werden soll.

Code:
function drawPath(ctx, waypoints) {
	ctx.beginPath();
	ctx.moveTo(waypoints[0][0], waypoints[0][1]);
	for (var i = 1; i < waypoints.length; i++) {
		ctx.lineTo(waypoints[i][0], waypoints[i][1]);
	}
	ctx.fill();
	ctx.closePath();
}

function getWayPoints(listElement, canvasObj) {
	var waypoints = false;
	var unparsed = listElement.attr("data-points");
	var parsed = unparsed.replace(/"x":|"y":|\[|\]|\{|\}/g, "");
	var temp = parsed.split(",");
	waypoints = new Array(temp.length / 2);
	var i = 0, j = 0;
	while (i < waypoints.length) {
		waypoints[i] = new Array(2);
		waypoints[i][0] = temp[j] * canvasObj.attr("width");
		j++;
		waypoints[i][1] = temp[j] * canvasObj.attr("heigth");
		i++;
		j++;
	}
	return waypoints;
}
	
function indexToRGBA(index) {
	var i = 0, r = 0, g = 0, b = 0, a = 1;
	for (var i1 = 0; i1 < 26; i++) {
		r = i1 * 10;
		for (var i2 = 0; i2 < 26; i++) {
			g = i2 * 10;
			for (var i3 = 0; i3 < 26; i++) {
				b = i3 * 10;
				if (i == index)
					break;
				i++;
			}
		}
	}
	return new Array(r, g, b, a);
}
	
function RGBAtoIndex(rgba) {
	var i = 0, r = 0, g = 0, b = 0, a = 1;
	for (var i1 = 0; i1 < 26; i++) {
		r = i1 * 10;
		for (var i2 = 0; i2 < 26; i++) {
			g = i2 * 10;
			for (var i3 = 0; i3 < 26; i++) {
				b = i3 * 10;
				if (new Array(r, g, b, a) == rgba)
					break;
				i++;
			}
		}
	}
	return i;
}

function relMouseCoords(event) {
	var totalOffsetX = 0;
	var totalOffsetY = 0;
	var canvasX = 0;
	var canvasY = 0;
	var currentElement = this;

	do {
		totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
		totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
	} while(currentElement = currentElement.offsetParent)
	
	canvasX = event.pageX - totalOffsetX;
	canvasY = event.pageY - totalOffsetY;
	
	return new Array(canvasX, canvasY);
}
		
// ------------------------------- //
		
var maincanvas = $("#frontpage-canvas");
var c = document.createElement("canvas");
c.width = maincanvas.width();
c.height = maincanvas.height();
var ctx = c.getContext("2d");
var interactives = $(".interactive.layer");
var color, waypoints;
for (var c = interactives.length - 1; c >= 0; c--) {
	color = indexToRGBA(i);
	ctx.fillStyle("rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + color[3] + ")");
	waypoints = getWayPoints(interactives[i], c.width, c.height);
	drawPath(ctx, waypoints);
}
		
$("#frontpage-canvas").on("click", function(e) {
	var coord = relMouseCoords(e);
	var imgd = ctx.getImageData(coord[0], coord[1], 1, 1);
	interactives[RGBAtoIndex(imgd.data)].addClass("active");
});

Wenn nun das angezeigte Canvas angeklickt und damit die event-funktion ausgelöst wird, ergibt das folgende Ausgabe in der Konsole:
Code:
1:839 Uncaught TypeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The provided double value is non-finite.

Nach einiger Recherche im Internet bin ich immernoch kein Stück schlauer. Alles was ich dazu gefunden habe hat nicht auf mein Problem gepasst deshalb dachte ich ich frage hier mal nach.

Danke schonmal für die Hilfe :)
 
Zurück
Oben