Menu
I want to draw an image with canvas. But the image is not showing up. If I try this code in JSFiddle, it works. I hope you can help me. Here is my script:
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
imageObj.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = "http://imageshack.us/a/img19/1158/tx2a.png";
};
This is how I place my canvas in the HTMl body:
<canvas id="myCanvas" width="1011" height="1700">Hier sollte eine Grafik sein</canvas>
And this is the working Fiddle: http://jsfiddle.net/5P2Ms/454/
I hope you can help me!
Full new HTML Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script>
var can = document.getElementById('myCanvas');
var ctx = can.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "http://imageshack.us/a/img19/1158/tx2a.png";
</script>
<canvas id="myCanvas" width="1011" height="1700">Hier sollte eine Grafik sein</canvas>
</body>
</html>
861
There was no window.onload in your full html. This is the problem
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<script type="text/javascript">
window.onload = function(){
var can = document.getElementById('myCanvas');
var ctx = can.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "http://imageshack.us/a/img19/1158/tx2a.png";
}
</script>
<body>
<canvas id="myCanvas" width="1011" height="1700">Hier sollte eine Grafik sein</canvas>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
