JS drawImage broken

Question

The image is in the same directory and everything, I can't seem to get it to work.

<body>
<center>
<canvas id='scrn' width='100' height='100'/>
</center>
<script>
function draw() {
var cv = document.getElementById('scrn').getContext('2d');
var img = document.getElementById('image');
cv.drawImage(img,10,10 10, 10,);
}
draw();
</script>
<image id='image' src='test.jpg'/>
</body>

The image shows up in the <image> tag but not in the canvas. Why is that?

Answer 1

You need to use a callback so that boot() is called only after the image loads. For example:

document.getElementById("image").onload = boot

Answer 2

var canvas = document.getElementById('scrn'); // get your canvas
    if (canvas) {
      var context = canvas.getContext('2d'); // get canvas context
      var img = document.getElementById('image'); // get image
      if (context && img) { // make sure context and img exists
        img.onload = () => { // call drawImage when img has finished loading
          context.drawImage(img,10,10 10, 10,);
        }
      }
    }

I would advise using let and const over var. For future note, always use drawImage inside an image's onload callback because that ensures the image which you wish to draw has successfully loaded.

JS drawImage broken

Question

2 answers

solution1
0 2021-04-10 00:59:19

solution2
0 2021-04-15 13:37:43

JS drawImage broken

Question

2 answers

solution1 0 2021-04-10 00:59:19

solution2 0 2021-04-15 13:37:43

solution1
0 2021-04-10 00:59:19

solution2
0 2021-04-15 13:37:43