Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Dans ce chapitre je vais vous montrer comment insérer une image existante dans un canevas.
Comme vous le voyez ci-dessus, l'image qui est destinée à être insérée dans le canevas apparait déjà dans la page ; donc fait partie du DOM de cette page.
Ci-dessous le canevas avec cette image insérée deux fois dans le canevas.
Si l'image n'apparait pas ; actualisez la page !
Dimensions natives de l'image 900 par 600 donc un rapport de 1,5 entre largeur et hauteur.
La même image est insérée deux fois dans le canevas mais à des endroits différents et avec des dimensions différentes ; première fois avec sa taille d'origine
et une deuxième fois avec une réduction (mais respect des proportions : 450 par 300).
L'image a été insérée dans la page via la balise IMG avec l'ID "brune" donc fait déjà partie du DOM.
Je n'ai pas besoin de charger l'image mais simplement de la référencer.
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 la page est chargée.
J'ai ensuite inséré du texte.
La méthode drawImage() a besoin que l’image ait été complètement chargée pour fonctionner.
Ci-dessous le deuxième canevas de cette page avec insertion de deux images stockées sur mon ordinateur : lune.gif & terre.gif.
Les images insérées n'ont pas de fond transparent ... mais ça existe pour les formats gif et png.
A vous de trouver dans la "toile" des images PNG ou GIF à fond transparent.
La balise canvas est un élément HTML donc on peut appliquer les propriétés CSS dont le raccourci "background'.
Notez qu'à chaque fois une fonction anonyme insère l'image dès qu'elle a été chargée.
Attention si vous ne prenez pas certaines précautions l'image insérée risque d'être déformée.
Ci-dessous un canevas incorporant deux images : la première est entièrement déformée et la seconde respecte les proportions
de la source.
Affichez la console !
Le canevas fait 300 par 450. La première image fait 900 par 600, la deuxième image fait 400 par 600. Donc la première est plus large que haute et c'est
l'inverse pour la seconde.
Le script :
La routine pour insérer la deuxième image est un peu plus longue pour la première mais assure aucune déformation de l'image insérée.
Pour désigner les variables j'utilise des termes utilisés déjà pour le premier canevas. Mais il n'y a pas d'ambiguïté car il s'agit
ici de variables locales puisque déclarées dans la fonction "insertions".
Encore une bonne nouvelle. C'est désormais très facile de filtrer les images insérées dans un canevas ; aussi simple qu'en CSS grâce
au module CanvasRenderingContext2D.filter.
Ci-dessous rendu d'un document HTML contenant un canevas qui insère 4 fois la même image : version originale, sépia, floutage, inversion.
Le script :
Si vous connaissez les filtres CSS, vous reconnaissez la syntaxe.
Il est possible de chainer plusieurs fonctions de filtre.
Ci-dessous rendu d'un document HTML contenant un canevas qui insère une photo deux fois avec à chaque fois deux primitives :
floutage et nuance de gris pour la première insertion ; floutage et rotation dans l'axe chromatique pour la deuxième incorporation.
Le script correspondant (extrait) :
Notez la valeur de la propriété filter : il suffit de séparer d'un espace les différentes primitives.
Un filtre avec la syntaxe CSS peut être basé sur la fonction drop-shadow(). Ce filtre a alors pour effet d'ombrer les objets du canevas.
Le code HTML :
Notez le dégradé linéaire en arrière plan du canevas.
Le script qui remplit ce canevas se résume en six lignes :
Une seule instruction pour dessiner le chemin et une seule ligne pour ombrer l'objet.
Pour connaitre les différentes valeurs possibles de la propriété filter :
les filtres en CSS
Insertion d'une image dans le canevas - les filtres
Sachez que désormais on peut appliquer aux objets du canevas des filtres avec la syntaxe CSS3.
Insertion dans le canevas d'une image du DOM
Le code HTML
L'élément HTML CANVAS est stylé avec des coins arrondis et un ombrage.
Le script correspondant
Pour les deux insertions on utilise la fonction drawImage avec cinq paramètres : référence objet, x, y
(x et y étant les coordonnées de l'image dans le canevas), largeur et hauteur de l'image dans le canevas.
Les deux derniers paramètres de la méthode sont facultatifs ; dans ce cas l'image est insérée avec ses dimensions natives. C'est le cas
de la première insertion (qui occupe donc tout le canevas).
Insertion dans un canevas d'images qui ne sont pas dans le DOM
Pour s’assurer que c’est bien le cas, on l’utilisera généralement avec un évènement de type load.
Le code HTML
Remarque : les images à insérer dans le canevas n'ont pas été chargées via le HTML ; il faut les charger via le script.
Le script correspondant
Insertion d'images sans déformation
Le code correspondant
Il suffit de récupérer les dimensions de l'image chargée, de calculer le ratio hauteur/largeur, de calculer les dimensions d'affichage dans le respect du ratio.
Les instructions "console.log()" sont provisoires.
Lorsqu'une page contient plusieurs canevas, je vous conseille de créer une fonction pour remplir chaque canevas.
Filtre les objets du canevas
Exemple 1
Exemple 2
Ombrer les formes et chemins avec des filtres CSS
Ci-dessous un document HTML contenant un canevas :
Un filtre avec deux primitives : blur & drop-shadow.
Comme la propriété CSS box-shadow, la fonction drop-shadow prend quatre arguments : offsetX, offsetY, floutage, couleur.
Les deux premiers arguments peuvent être négatifs.