Meine Herren!

Wie kann ich nun das erzeugete Image-Element einem Canvas zuweisen?

Mein spricht eigentlich nicht davon, dem Canvas-Element das Image-Element zuzuweisen. Canvas übersetzt sich mit Leinwand, wir zeichnen das Bild einfach auf diese Leinwand.

Ich greife dein Beispiel mal auf:

var canvas = document.createElement('canvas');  
// Wir müssen erstmal die Dimensionen unserer Leindwand mit denen unseres Bildes abgleichen  
canvas.height = imgelem.height;  
canvas.width = imgelem.width;  
  
var context = canvas.getContext('2d');  
  
// Weil unsere Leinwand und unser Ursprungs-Bild jetzt gleich groß sind, können wir uns nun dem eigentlichen Zeichnen widmen. Wir müssen natürlich oben, links ansetzen, damit es genau passt:  
  
canvas.drawImage( imgelem,0,0 );  
  
// Den eigentlichen Code, um den Download zu starten, habe ich abgewandelt. Ich finde es nicht sinnvoll, von einer gewöhnlichen Seite auf einen Datei-Download weiter zu leiten. Ich benutze deshalb ein a-Element um den Download zu starten.  
  
var image = canvas.toDataURL("image/png");  
  
var a = document.createElement('a');  
a.href = image;  
a.download = 'Bildname.png';  
a.click(); // Wir brauchen künstlichen Click, damit der Browser den Download beginnt