Canvas-> Bild laden

Hallo,

ich möchte ein Bild versetzt laden, aber irgendwo hakt es (das ist der erste Versuch mit Canvas).

Mein Code:

HTML:
<!DOCTYPE html>
<html>

<head>
<title>Test</title>
<script type="application/x-javascript">
 function draw() 
 { 
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var img_src = 'bild.JPG';
ctx.drawImage(img_src);
}
</script>
</head>

<body onload="draw();">
<canvas id="canvas" width="400" height="400">Dein Browser kann diese Grafik nicht darstellen.</canvas>
</body>

</html>
 
Als erstes bedanke ich mich herzlichst bei dir ;)

Als zweites stelle ich natürlich die Lsg. online, damit andere auch die Lösung sehen ;)

HTML:
<!DOCTYPE html>
<html>

<head>
<title>Test</title>
<script type="application/x-javascript">
 function draw() 
 { 
    var ctx = document.getElementById('canvas').getContext('2d');  
    var img = new Image(); 
	img.src = 'bild.jpg'; 
	ctx.drawImage(img,80,80); 
	
}
</script>
</head>

<body onload="draw();">
<canvas id="canvas" width="400" height="400">Dein Browser kann diese Grafik nicht darstellen.</canvas>
</body>

</html>
 
Als zweites stelle ich natürlich die Lsg. online, damit andere auch die Lösung sehen ;)

Sehr löblich.

Du solltest es aber noch folgendermaßen abändern, sonst hast du ein Problem, wenn du nicht mehr lokal arbeitest, weil das Bild noch nicht geladen wurde (https://developer.mozilla.org/en/Canvas_tutorial/Using_images#Creating_an_image_from_scratch).

Javascript:
var ctx = document.getElementById('canvas').getContext('2d');  
var img = new Image();

img.onload = function() {
    ctx.drawImage(img,80,80); 
}

img.src = 'bild.jpg';
 
Zurück