Home/ Questions/Q 8869711
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T17:32:50+00:00

So I’m working on a little project just for fun and I learned some

  • 0

So I’m working on a little project just for fun and I learned some stuff about canvases and I wrote a script(which now is gone) to just draw an image to the canvas, it wasn’t working so I deleted it. So I went to w3schools and took their example code, it still doesn’t work. You can check it out here: http://zach.muny.us/widgets/onlineedit I don’t get any errors, nothing. Just hoping someone knows a fix o.O

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="http://www.w3schools.com/html/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");
ctx.drawImage(img,10,10);

</script>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The image probably hasn’t loaded yet, use the image’s load event to draw the image when it loads

    <script>

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

</script>

    http://jsfiddle.net/mowglisanu/DxT4u/

    • 0