0

I followed W3 Schools tutorials and ended up writing following code that doesn't do the work of copying the image inside canvas element. Canvas is blank...

<img id="image" src="assets/images/bw.jpg" width="200" height="276" alt="" />
<canvas id="canvas" width="220" height="286"></canvas>

and Javascript follows:

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var img = document.getElementById("image");
ctx.drawImage(img,0,0);

Why this simple example is not working???

daniel.tosaba
  • 2,503
  • 9
  • 36
  • 47

1 Answers1

0

Try including the width, height at .drawImage() call; that is

The actual solution, as patiently pointed out by @Kaiido , is to use onload event attribute attached to <img> element

<img id="image" onload="draw()" src="http://lorempixel.com/50/50" width="200" height="276" alt="" />
<canvas id="canvas" width="220" height="286"></canvas>
<script>
  function draw() {
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    var img = document.getElementById("image");
    ctx.drawImage(img,0,0);
  }
</script>

or HTMLImageElement.addEventListener("load", handler)

guest271314
  • 1
  • 15
  • 104
  • 177
  • beautiful. thank you :) – daniel.tosaba Apr 03 '16 at 14:11
  • 1
    Except if image's width and height were set to 0 that's definitely not the problem! destinationX and destinationY options of drawImage do default to the image size. @daniel.tosaba your problem is that you are not waiting for the onload event. It's working now because the image is cached. – Kaiido Apr 03 '16 at 14:26
  • @Kaiido _"your problem is that you are not waiting for the onload event."_ Which `onload` event are you referencing ? `img` or `window` ? – guest271314 Apr 03 '16 at 14:37
  • Well both will do in this particular case since the image is appended into document's markup but the only one really needed is the img's one. – Kaiido Apr 03 '16 at 14:39
  • @Kaiido `js` at OP does not use `new Image`, but `` tag within `html` document. Do you mean attach `onload` at `` tag within `html` to call `.drawImage()` when `img` load is complete ? – guest271314 Apr 03 '16 at 14:46
  • @Kaiido Linked Question / canonical does not appear to provide guidance for case where `` tag is used within `html` document instead of `new Image` ? Current Question would not be a duplicate of linked Question, without including description of present case ? – guest271314 Apr 03 '16 at 14:55
  • 1
    The main issue here is that OP doesn't wait for the image has loaded. In this particular case he can wait for the window onload to be sure his image has loaded, or check the image .complete property. If false he should attach the function to the img's onload. If true, the image is already loaded. Still a dupe. Ps: attaching events in HTML markup is considered a bad practice nowadays, keep your scripts in script tags. – Kaiido Apr 03 '16 at 15:45
  • @Kaiido _"Still a dupe."_ Would respectfully disagree. The description at comment concerning case of an `` tag is not included at actual text of linked Question http://stackoverflow.com/questions/32880641/canvascontext2d-drawimage-issue-onload-and-cors ? Is this to be inferred ? The concept of something being "considered" a "bad practice" is interesting. "considered" by whom ? When was the survey run ? Where to find tally of outcome for each voters' consideration ? – guest271314 Apr 03 '16 at 15:51
  • 1
    https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Event_attributes please read this that's somehow funny. Also there may be something in W3C recommendations, but too lazy to find it rn. Still a dupe because a dupe doesn't have to treat the exact same case (what if the src was a 404?) but to point to the main mistake. Your answer can't be the solution and you would know it if you knew more about the subject. – Kaiido Apr 03 '16 at 20:42
  • @Kaiido You are correct. Was able to use `onload` event attribute at `` to call `.drawImage()` – guest271314 Apr 03 '16 at 21:35
  • @Kaiido https://jsfiddle.net/j28stqj9/ – guest271314 Apr 03 '16 at 21:45