Bild und text in ein Canvas

[rernanded]

Hi

ich habe zwei js-Scripte und jedes für sich funktioniert gut. Beim ersten "packe" ich einen Text in ein Canvas, beim zweiten "packe" ich ein Bild in ein Canvas.
Wie kann ich beide Scripte so kombiniren dass Bild und Text im Canvas vereint sind und zwar der Text über dem Bild liegend und dabei am unteren Bildrand rechtsbündig?

MONI

<canvas id="canvas" style="border:2px solid black;" width="456" height="456"></canvas>

<script type="text/javascript">
        var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data =
'<svg xmlns="http://www.w3.org/2000/svg" width="456" height="456">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" >' +
'<div style="font-size:30px;">Beispielstext Beispielstext Beispielstext</div>' +
'</div>' +
'</foreignObject>' +
'</svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {
  type: 'image/svg+xml;charset=utf-8'
});
var url = DOMURL.createObjectURL(svg);

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
}

img.src = url;
</script>

<img id="image" width="369" height="369" src="beispielsbild.jpg" style="display: block;">

<canvas id="canvas" width="369" height="369" style="border: 2px solid #000;"></canvas>

<script>
window.onload = function() {
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("image");
  ctx.drawImage(img, 10, 10);
}
</script>

 

[Sempervivum]

Das ist ein häufiges Problem: Man muss abwarten bis alle Bilder geladen sind, bevor man mit dem Zeichnen anfängt. Ich habe es immer so gelöst: Die Anzahl der Bilder in einer Variablen definieren. Eine Funktion, z. B. imgLoaded definieren, die abfragt, ob schon alle Bilder geladen sind. Erst wenn das zutrifft, die Bilder zeichnen.

var nrImages = 2, counterImages = 0;
var img1 = new Image(), img2 = new Image();
function imgLoaded() {
    counterImages++;
    if (counterImages == nrImages) {
        // jetzt sind alle Bilder geladen und Du kannst sie auf
        // das Canvas packen
    }
}
img1.onload = imgLoaded;
img1.src = 'src-des-ersten-bildes.jpg';
img2.onload = imgLoaded;
img2.src = 'src-des-zweiten-bildes.jpg';

Dieses Muster müsstest Du leicht auf deinen Fall übertragen können.

 

[rernanded]

Okay, danke, erledigt.