Tuto Canvas : Images

<canvas> accepte le chargement d'images dans sa surface de dessin. Cette fonction est vraiment très puissante, elle permet d'afficher une image à certaines coordonnées. Pour ceci, on initialise une nouvelle image grâce au constructeur new Image().
Sa forme la plus basique ne comporte que trois paramètres: l'objet "Image" et  les coordonnées x et y:

var image = new Image();
image.src = "source.extension";
context.drawImage(image, x, y);

La méthode drawImage(image,x,y) copie l'image image chargée sur la surface de dessin, aux coordonnées (x,y). Il est possible de se resservir de la même ressource image une infinité de fois.

 

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");

var image = new Image();
image.src = 'like.png';
image.onload = function() {
    context.drawImage(image,50,50);
};

Résultat:

Aussi, nous pouvons aussi créer des motifs qui seront répétés horizontalement, verticalement. Pour ceci, on utilise la méthode createPattern(image, répétition) exploite une image, chargée comme indiqué précédemment, et lui confère un mode de répétition, parmi: repeat-y, repeat-x, ou repeat.

 

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");

var image = new Image();
image.src = 'like.png';
image.onload = function(){
    var motif = context.createPattern( image, 'repeat-x' );
    context.fillStyle = motif;
    context.fillRect(0,0,250,250);
};

Résultat: