CODEWITHSUNDEEP
javascripthtmlcanvas
Enfant Du Bizz
Enfant Du Bizz

Reputation: 15

Why won't my Canvas show up?

<canvas id="canvas" width="150" height="150">
  <p>Désolé, votre navigateur ne supporte pas Canvas mettez le donc à jour</p>
</canvas>
<script>
  var canvas  = document.querySelector('#canvas');
  var context = canvas.getContext('2d');
  var test = new Image();
  test.src = 'test.jpg'; // I'm sure that test.jpg is in the folder
  context.drawImage(test, 35, 35);
</script>

Can you please help me? My canvas does exist but I can't insert an image in it. Why? Can someone explain me?

Upvotes: 0

Views: 302

Answers (1)

alex
alex

Reputation: 490153

You need to wait until the image has downloaded, by using its load event.

var test = new Image();

test.onload = function() { context.drawImage(test, 35, 35); };

test.src = 'test.jpg';

Upvotes: 3

Related Questions