# Canvas-> Bild laden



## Chris_ist_online (21. Februar 2012)

Hallo,

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

Mein Code:


```
<!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>
```


----------



## CPoly (21. Februar 2012)

Du übergibst "drawImage" einen String und kein Bild. Du musst entweder ein img-Tag benutzen oder das Bild erst Laden (new Image()). Das ist alles hier im Detail beschrieben: https://developer.mozilla.org/en/Canvas_tutorial/Using_images#Importing_images


----------



## Chris_ist_online (21. Februar 2012)

Als erstes bedanke ich mich herzlichst bei dir 

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


```
<!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>
```


----------



## CPoly (21. Februar 2012)

Chris_ist_online hat gesagt.:


> 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).


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

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

img.src = 'bild.jpg';
```


----------

