HTML5 drawImage mit Canvas Element im Chrome Browser

[freeman4gu]

Hallo zusammen :)

also ich habe da ein Problem. Und zwar benutze ich einen Canvas-Buffer um ein Bild zu manipulieren und möchte diesen Buffer dann später in einem andren Canvas zeichnen.

also ich habe diese variablen (die initialisierung habe ich jetzt nicht aufgeführt, sondern möchte nur das Problem verdeutlichen):

var img = new Image(); {...}
var canvas = document.createElement('canvas'); {.draw.etc.}

context.drawImage(img, 0,0,200,200,0,0,200,200); // - Funktioniert
context.drawImage(canvas, 0,0,200,200,0,0,200,200); // - Funktioniert nicht

Komischerweise funktioniert das Ganze im Firefox ohne Probleme, allerdings bekomme ich im Chrome eine Fehlermeldung:

INVALID_STATE_ERR: DOM Exception 11 :o(

so leider kann ich damit nicht viel anfangen ^^
vielleicht weiss ja direkt von euch jemand rat?

Besten Gruß

[freeman4gu]

Ok was mir dazu noch aufgefallen ist, es betrifft nur folgende funktion:

drawImage(buffer, sx, sy, swidth, sheight, dx, dy, dwidth, dheight);

Beim Aufruf "drawImage(buffer, 0, 0)" funktionierts auch im Chrome.

[freeman4gu]

So Ok ich hab den Fehler gefunden.
Das Problem war, das die Verarbeitung der Canvas schneller war, als das Image geladen werden konnte. Daher waren die Höhe und die Breite des Canvas 0.

Und wenn man solch ein Canvas versucht zu zeichen, kommt diese Fehlermeldung.

Lösung des Problems war nun:

die image.onload = function() ...
und eine simple if-abfrage if (canvas.width != 0 && ...) draw