canvas not drawing images

Asked 27/9, 2013 at 21:59 Answered 13/9, 2019 at 18:49

I'm just trying to figure out how to get an image to draw on a canvas. I followed a tutorial on W3 schools, but when i tried it on my own it doesn't seem to be working. I copy and paste the code below into an HTML file, and the image never loads into the canvas. I downloaded the picture into the same directory. I've been asking around, and looked online, but no one seems to know what the problem is. I'm using an updated version of chrome (Version 29.0.1547.76 m).

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">

<p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
this.ctx.drawImage(img,10,10);

</script>

</body>
</html>

Sanatorium answered 27/9, 2013 at 21:59 Comment(4)

Never never never never use W3Schools. NEVER. – Lydgate 27/9, 2013 at 22:3

Would you suggest something better? – Sanatorium 27/9, 2013 at 22:13

About the unreliability of W3Schools see W3Fools. A better source on this subject can be found at HTML5canvastutorials. – Tilden 27/9, 2013 at 22:16

@Sanatorium developer.mozilla.org – Lydgate 27/9, 2013 at 22:16

Your image probably hasn't finished loading at the point you are using drawImage:

HTML

Add onload handler in img tag:

<img id="scream" onload="draw()" src="...

Then the function to handle it:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");

function draw() {
    ctx.drawImage(img,10,10);
}

Online demo here

Be aware of that where you place the scripts in your document matters as well.

I would recommend you setting the src attribute in JavaScript as well. That makes it more "safe" to handle the onload (or subscribed event with img.addEventListener('load', ...).

Rizal answered 27/9, 2013 at 22:7 Comment(2)

Does this mean that all of the code gets run when the html is parsed? So, the GET request for the image wouldn't even have been sent yet when that code is running. – Sanatorium 27/9, 2013 at 22:47

@Sanatorium in this case the DOM is setup first and then the script is run. It all depends on if the image is loaded or not before script is parsed and executed. If script gets to the drawimage point before image is complete there will be no image to paint. Image loading is asynchronous so we need to use event handlers to deal with them properly. Only in IE may you risk a onload event not being raised (which in case you can use the img.complete flag first). – Rizal 27/9, 2013 at 22:56

you should use the following approach that first let the image loaded then display:

image.onload = function() {
    pic.getContext('2d').drawImage('your image to display', 0,0);
}

Warmup answered 7/4, 2014 at 13:37 Comment(0)

"If you try to call drawImage() before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). So you need to be sure to use the load event so you don't try this before the image has loaded."

example:

var img = new Image();   // Create new img element
img.addEventListener('load', function() {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

Source

Jural answered 13/9, 2019 at 18:49 Comment(0)

Recommended topics

Hot tags