html5 canvas rubbeleffekt

Sicher kann es das aber es wird dauern und du wirst unter Umständen viel Hilfe gebrauchen wie du ja offenbar schon bemerkt hast.

Neu beginnen tust du ja nur bedingt, du hast ja deinen Code an dem du dich grob orientieren kannst. Wenn deine Funktionen logisch sind kannst du sie ja auch logisch neu sortieren oder?

Ich schau mal.

Keine Sorge du nervst nicht, ich habe das "Rätsel" jetzt mal entheddert. Grundlegend hatten wir 2-3 Probleme. Bitte beachte die Zeilennummern am Rand der Codebeispiele, ich habe mich da an deinen Zeilen orientiert.

Du hast nun die Analyse des Bildes in die mouseup Funktion verschoben, jedoch in einen Bereich der nie ausgeführt wird, nämlich nach dem Return. Zeile 206 bis 254 müssen verschoben werden unter Zeile 200:

if (e.cancelable) { e.preventDefault(); } 




// genauigkeit der pruefung
tolerance = 3;
// ...

Das nächste Problem ist in der gesuchten Farbe zu Hause. Es wird derzeit überprüft wie viele Pixel des Bildes schwarz sind, siehe Zeile 120. Dort muss die Farbe des HINTERGRUNDES stehen, sprich das hellere Grün, dies habe ich mal eben heraus gefunden:

rgb =
{
    r: 7,
    g: 225,
    b: 131
}

In Zeile 219 verwendest du die ID 'draw', musst allerdings die ID 'maincanvas' nutzen, welche du im HTML Bereich definiert hast, das sieht man auch noch in den 2 darüber liegenden, auskommentierten Zeilen.

Ich weiß gerade nicht mehr genau ob ich noch etwas geändert habe, bitte probiere es mal so und melde dich ob es klappt, wenn nicht sage doch bitte noch mal kurz Bescheid dann schaue ich erneut. Ich trage es sowieso nach wenn es mir gleich noch einfällt

Ich gehe davon aus der Code auf der Seite ist aktuell, demnach müsstest du noch folgendes übernehmen:

rgb =
{
    r: 7,
    g: 225,
    b: 131
}

Zu dem Problem mit dem Mobilgerät kann ich leider gerade auch nur mutmaßen.

Welchen Code genau hast du dir mit was für einem Gerät (Betriebssystem?) angeguckt?

Da kann ich leider so gar nichts zu sagen, Android und Windows kann ich mir angucken, iOS nicht

Nein das Verhalten, dass der Verweis nur am Rand aufrufbar ist, kann ich auf Android bestätigen.

Ich habe gerade allerdings auch keine Idee warum.

Ich würde wie folgt vorgehen: Entferne mal das click Event vom Canvas Objekt komplett und übernimm die Weiterleitung einfach mit in den mouseup handler:

percentage = pixel * 100 / 75000;




if (percentage > 90) {
    window.location.href = "http://www.google.at";
}