Méthode : CanvasRenderingContext2D.drawImage()

<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>

Emulation de la console

Charge une image en mémoire et l'affiche dans le canvas.

Dunod Fnac Amazon

Chargement
en cours...