Why doesn't my image draw in Canvas ? No error in my code
Question
I got this sample of code which i was working on it, i got a trouble with because my image angular doesn't appear on the web browser, i can't understand what's my mistake, thanks in advance for your help.
<html>
<script>
var canvas,context;
function init(){
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
monImg = new Image();
monImg.src="img/angular.png";
context.drawImage(monImg,300,300);
}
window.onload=init();
</script>
<body>
<canvas id="canvas" width="1920" height="1080"></canvas>
</body>
2 answers
solution1
2 2019-01-09 13:52:39
See this question .
You have to wait for the image to load before you do anything with it. The easiest way is:
monImg = new Image();
monImg.onLoad = function() {
context.drawImage(monImg, 300, 300);
}
monImg.src = "img/angular.png";
solution2
1 ACCPTED 2019-01-09 13:58:52
You need to add a handler for the Image onload where you call drawImage() such as:
<html>
<body>
<canvas id="canvas" width="1920" height="1080"></canvas>
</body>
<script>
var canvas,context;
function init(){
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
monImg = new Image();
monImg.src="img/angular.png";
monImg.onload = function() {
context.drawImage(monImg,300,300);
}
}
window.onload=init();
</script>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
My code draw image in the wrong place in the canvas
Why won't my canvas draw?
Why won't my image draw to canvas unless there is an instance of the image in the html?
Why doesn't my canvas animation show?
Why does the previous image draw on my HTML5 canvas?
HTML5 Canvas won't draw my image to the screen (without an error)
Why won't my image show on canvas?
My code can't draw anything instead of displaying a white canvas
Why can't I draw a rectangle in my HTML5 canvas?
Why doesn't my textbox show over my canvas element?
Related Tags