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 = ".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: /
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 = ".png";
</script>
<canvas id="myCanvas" width="1011" height="1700">Hier sollte eine Grafik sein</canvas>
</body>
</html>
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/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>
- As I know, onload() is not supported by the canvas tag. w3schools./jsref/event_onload.asp – Burak Keceli Commented Aug 18, 2013 at 13:54
- No, there are no errors. And I found this onload() in many examples. Are you sure that doesn't work? – Materno Commented Aug 18, 2013 at 13:56
- @ChristophBeylage you wrote imageObj.onload. Change it to img.onload and try it. This should be working, at least worked on my local. – Burak Keceli Commented Aug 18, 2013 at 14:11
- Doesn't work for me :( – Materno Commented Aug 18, 2013 at 14:13
4 Answers
Reset to default 1There 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>
Pretty sure the imageObj.onload is your problem:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = "http://imageshack.us/a/img19/1158/tx2a.png";
This works in JSFiddle with your HTML. The problem is you call onload on a non-existant object, where I think you mean to run it on the image you instantiate to the variable img.
Update: This HTML should load the img for you.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script>
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>
<canvas id="myCanvas" width="1011" height="1700">Hier sollte eine Grafik sein</canvas>
</body>
</html>
Your problem is you are trying to use a canvas in your script before you declare it in html (accessed by script but HTML-parser did not loaded this element). So, in this case, document.getElementById('myCanvas') is null, and can.getContext('2d') throws exception error with message 'can is null'. To solve that you need to put <canvas ...></canvas> before that script which accesses that element or make this script executed when entire content is parsed and loaded just right the same way as 'Bjarke H. Søndergaard' and 'B.K.' suggested.
I hope this help you.
It's unbelievable no one is telling that to display the chart we have to include chart.js as well! Just add this and it will work:
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744226594a4564036.html
评论列表（0条）