Retourner à la page d'accueil de TJS

Méthode : CanvasRenderingContext2D.drawImage()

          

Affiche une image dans le canvas à l'emplacement (x, y)

Syntaxe
myContext.drawImage(image, x, y, [largeur, hauteur])

Description
Affiche l'image dans le canvas à l'emplacement (x, y).
Il existe d'autres paramètres pour redimensionner à la dimension [largeur, hauteur] et pour cropper l'image avant de l'afficher.


Exemple Affichage d'images dans un canvas
Code source
<canvas id="myCanvas" width="350" height="200" style="background-color:#fff"></canvas>
<script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
var myContext=myCanvas.getContext("2d");

var img1=new Image();
img1.src="media/logo-js.png";
img1.onload=function() {
 console.log(img1.src+" chargée");
 myContext.drawImage(img1, 50, 2);
};

var img2=new Image();
img2.src="media/logo-php.png";
img2.onload=function() {
 console.log(img2.src+" chargée");
 myContext.drawImage(img2, 140, 60);
 myContext.drawImage(img2, 220, 10, 75, 56);
};
</script>

Résultat
Emulation de la console
Explication
Charge une image en mémoire et l'affiche dans le canvas.

Page en rapport
Le tutoriel sur le dessin avec canvas
Page mise à jour le

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 13/12/2018 19:24:11 sur php7 en 20.98 ms