Comment ajouter une image au canevas

Question

J'expérimente un peu avec le nouvel élément canvas en HTML.

Je veux simplement ajouter une image au canevas, mais cela ne fonctionne pas pour une raison quelconque.

J'ai le code suivant :

HTML

<canvas id="viewport"></canvas>

CSS

canvas#viewport { border: 1px solid white; width: 900px; }

JS

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  context.drawImage(base_image, 100, 100);
}

L'image existe et je n'obtiens aucune erreur JavaScript. L'image ne s'affiche tout simplement pas.

Il doit y avoir quelque chose de très simple que j'ai manqué...

Answer 1

Référer ce J'espère que cela vous aidera.

var erase_image = new Image();
erase_image.src = '../images/erazer.gif';           
erase_image.onload = function()
{
     context.drawImage(erase_image, 78, 19);
}