rernanded
Erfahrenes Mitglied
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
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
HTML:
<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>
HTML:
<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>