Insertion d'une image dans un canevas

Aperçu du canevas

Le code de la page

Les dimensions natives de l'image sont 900 par 600 donc un rapport de 1,5.

... <style> @media screen and (min-width: 900px) {canvas {width : 600px ; height : 400px; }} @media screen and (max-width: 899px) {canvas {width : 300px; height : 200px; }} ... <body> <canvas></canvas> ... <script> var canevas = document.querySelector('canvas'); var contexte = canevas.getContext('2d'); var X=canevas.width; var Y=canevas.height; alert("dimensions canevas : "+ X + " " + Y + " "+ typeof(X)) ; var image = new Image(); // création d'une instance de l'objet Image image.src = '../images/brune_nue.jpg'; image.onload = function(). { // dès que l'image importée est chargée contexte.drawImage(image,0,0,X/2,Y/2) ; contexte.drawImage(image,X/2,Y/2,X/2,Y/2) ; } ...

CSS : le canevas fait 600 par 400 ou 300 par 200 selon la largeur de l'écran (page responsive).

JavaScript : Pour le script le canevas fait 300 par 150 comme pour l'exemple de la page précédente.
L'image est insérée deux fois dans la zone de dessin mais à des positions différentes via une fonction qui est déclenchée dès que l'image est chargée.
Pour les deux insertions on utilise la fonction drawImage avec cinq paramètres : instance objet Image, x, y (x et y étant les coordonnées de l'arête supérieure gauche), width, height (dimensions de l'image).
Dans les deux cas l'image est insérée avec réduction (largeur = X/2 donc 300 et hauteur = Y/2 donc 200) donc réduction mais avec respect des proportions.
Dans le premier cas l'image est insérée en haut à gauche et dans le deuxième cas au milieu du canevas. Retour menu