Clemens Eisserer: Wie am effizientesten copyArea bei Canvas implementieren?

Hi,

Ich suche nach einer Möglichkeit, einen Bereich eines HTML5-Canvas an eine andere Position zu kopieren - ähnlich der copyArea Methode von Java.

Die einzige Idee die mir eingefallen wäre, ist zuerst den Bereich mittels getImageData() als ImageData-Objekt zu kopieren und anschließend wieder mittels drawImage() zu zeichnen - was leider langsam ist.

Kennt ihr einen effizienteren Weg?

Danke im Vorraus, Clemens

  1. Hi,

    Ich suche nach einer Möglichkeit, einen Bereich eines HTML5-Canvas an eine andere Position zu kopieren - ähnlich der copyArea Methode von Java.

    Die einzige Idee die mir eingefallen wäre, ist zuerst den Bereich mittels getImageData() als ImageData-Objekt zu kopieren und anschließend wieder mittels drawImage() zu zeichnen - was leider langsam ist.

    Kennt ihr einen effizienteren Weg?

    Im Prinzip könnte Doppelpufferung eine mögliche Lösung sein.
    Bisherige Ausgabe im einen Puffer-Context durchführen, im Anzeige-Context einen clip-Pfad mit dem gewünschten Ausschnitt setzen und den Puffer per drawImage in den Anzeige-Context kopieren.

    1. Nachtrag: Einen Clipping-Pfad zu setzen ist nicht notwendig da drawImage das auch mit zusätzlichen Parametern direkt selbst erledigen kann.)