{"id":1000,"date":"2022-12-16T16:34:57","date_gmt":"2022-12-16T15:34:57","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=1000"},"modified":"2022-12-26T10:20:16","modified_gmt":"2022-12-26T09:20:16","slug":"amusons-nous-avec-canvas-retour","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/16\/amusons-nous-avec-canvas-retour\/","title":{"rendered":"Amusons-nous avec les canvas – le retour"},"content":{"rendered":"\n

Il y a quelques ann\u00e9es, j\u2019avais \u00e9crit une s\u00e9rie<\/a> d\u2019articles expliquant comment cr\u00e9er \u00e0 l\u2019aide du  tag <canvas><\/a><\/code> un texte ombr\u00e9 avec une image en fond utilisant une police Google Fonts.<\/p>\n\n\n\n

La technique ayant un peu \u00e9volu\u00e9 depuis, et ayant fait de nouveaux essais de mon c\u00f4t\u00e9, je pense qu\u2019il est temps de cr\u00e9er une nouvelle version de ce code.<\/p>\n\n\n\n

Le premier changement concerne la fa\u00e7on dont on g\u00e8re l\u2019utilisation de la police Google Font dans le canvas.<\/p>\n\n\n\n

Dans le premier script, le chargement de la police \u00e9tait assur\u00e9 de mani\u00e8re \u201cclassique\u201d par CSS. Le probl\u00e8me ? Pour que la police soit utilisable dans le canvas, il faut que la police soit utilis\u00e9e sur au moins un \u00e9l\u00e9ment de notre page. Et pour s\u2019assurer que la police soit bien charg\u00e9e, le code qui s\u2019occupe du \u201cdessin\u201d est ex\u00e9cut\u00e9 apr\u00e8s 1s (utilisation d\u2019un setTimeOut()<\/a><\/code>).<\/p>\n\n\n\n

Depuis les versions 35 de Chrome et la version 41 de Firefox, toutes deux sorties apr\u00e8s la r\u00e9daction de la premi\u00e8re s\u00e9rie d’articles, il existe un objet JavaScript qui permet de d\u00e9finir une police personnalis\u00e9e, qui par la suite peut \u00eatre utilis\u00e9e partout sur le document, y compris dans les canvas.<\/p>\n\n\n\n\n\n\n\n

Cet objet est FontFace<\/a><\/code>, et son constructeur a deux param\u00e8tres obligatoires: le nom sous lequel la police sera utilisable dans le document, et le chemin vers le fichier de police. En troisi\u00e8me param\u00e8tre on peut fournir un objet contenant des propri\u00e9t\u00e9s de police (style, weight\u2026).<\/p>\n\n\n\n

Pour pouvoir r\u00e9cup\u00e9rer le fichier d\u2019une police de Google Fonts, il faut aller regarder dans le CSS dont on nous donne l\u2019adresse dans la section \u201cUse on the web\u201d, et copier la r\u00e8gle src du font-face qui nous int\u00e9resse.<\/p>\n\n\n

\n
\"\"
Section \u00ab\u00a0Use on the web\u00a0\u00bb<\/figcaption><\/figure>\n<\/div>\n\n
\n\/* latin-ext *\/\n@font-face {\n  font-family: 'Knewave';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(https:\/\/fonts.gstatic.com\/s\/knewave\/v14\/sykz-yx0lLcxQaSIhSO3--rE.woff2) format('woff2');\n  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n\/* latin *\/\n@font-face {\n  font-family: 'Knewave';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(https:\/\/fonts.gstatic.com\/s\/knewave\/v14\/sykz-yx0lLcxQaSIhS23-w.woff2) format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n<\/pre><\/div>\n\n\n
L\u2019int\u00e9r\u00eat d\u2019un objet FontFace<\/code> est qu\u2019il poss\u00e8de une m\u00e9thode load()<\/code>, qui permet de r\u00e9ellement changer le fichier de police, qui est chainable avec une m\u00e9thode then()<\/code>, \u00e0 laquelle on fournit une fonction anonyme qui rajoute la police charg\u00e9e dans celles utilisables dans le document, et le code \u00e0 ex\u00e9cuter par la suite.<\/p>\n\n\n
\nconst customFont = new FontFace('CustomFont', 'url(https:\/\/fonts.gstatic.com\/s\/knewave\/v14\/sykz-yx0lLcxQaSIhS23-w.woff2)');\n\ncustomFont.load().then(() => {\n    document.fonts.add(customFont); \/\/ assigne la font au document\n\n    \/\/ votre code\n\n}\n<\/pre><\/div>\n\n\n
Le deuxi\u00e8me changement concerne la fa\u00e7on de composer l\u2019image. Pour pouvoir ajouter l\u2019ombre derri\u00e8re le texte contenant l\u2019image, je passait par un calque interm\u00e9diaire, mais il est possible de faire sans.<\/p>\n\n\n\n
La premi\u00e8re partie reste la m\u00eame : on trace le texte sur le canvas, et apr\u00e8s avoir pass\u00e9 le mode de compositing<\/a> en \u2018source-atop\u2019 on ajoute l\u2019image.<\/p>\n\n\n\n
Ensuite, on passe le mode de compositing en \u2018destination-over\u2019, et apr\u00e8s avoir rajout\u00e9 une couleur et un flou d’ombre au contexte, on retrace \u00e0 nouveau le texte.<\/p>\n\n\n\n
Comme dans le cas du script de texte arc-en-ciel<\/a>, il est maintenant possible d\u2019avoir un r\u00e9sultat similaire avec seulement du CSS. Mais alors, pourquoi l\u2019avoir fait avec du JS ?<\/em> me diriez-vous. Tout simplement parce qu\u2019on le peut, et que cela fait un bon exercice. Et petit bonus, \u00e7a donnera l\u2019occasion d\u2019\u00e9crire un autre tuto.<\/p>\n\n\n\n
Pour voir le script final en action, rendez-vous ici<\/a>.<\/p>\n\n\n\n
\u00c0 bient\u00f4t pour d\u2019autres aventures codesques.<\/p>\n","protected":false},"excerpt":{"rendered":"
Il y a quelques ann\u00e9es, j\u2019avais \u00e9crit une s\u00e9rie d\u2019articles expliquant comment cr\u00e9er \u00e0 l\u2019aide du  tag <canvas> un texte ombr\u00e9 avec une image en fond utilisant une police Google Fonts. La technique ayant un peu \u00e9volu\u00e9 depuis, et ayant … Continuer la lecture →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[19],"tags":[20,31],"class_list":["post-1000","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-canvas","tag-javascript"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-g8","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":211,"url":"https:\/\/geekcommunicant.com\/blog\/2013\/08\/11\/amusons-nous-avec-les-canvas\/","url_meta":{"origin":1000,"position":0},"title":"[JavaScript\/HTML5] Amusons-nous avec les canvas","author":"geekc","date":"11\/08\/2013","format":false,"excerpt":"Aujourd'hui nous allons voir comment ajouter du texte aux nouveaux \u00e9l\u00e9ments  du HTML5. Comme les plus attentifs d'entre-vous l'auront d\u00e9j\u00e0 remarqu\u00e9, le titre de l'article r\u00e9v\u00e8le d\u00e9j\u00e0 une partie du contenu de l'article ; effectivement, pour utiliser les canvas, il faut obligatoirement passer par JavaScript. Le HTML La d\u00e9claration\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":230,"url":"https:\/\/geekcommunicant.com\/blog\/2013\/08\/22\/et-maintenant-ajoutons-quelques-couleurs\/","url_meta":{"origin":1000,"position":1},"title":"[JavaScript\/HTML5] Et maintenant ajoutons quelques couleurs","author":"geekc","date":"22\/08\/2013","format":false,"excerpt":"Dans mon pr\u00e9c\u00e9dent article Amusons-nous avec les canvas, nous \u00e9tions arriv\u00e9s au r\u00e9sultat ci-dessous: Nous avons donc ici un effet que l'on aurait pu obtenir en CSS. Mais gr\u00e2ce aux  nous pouvons \u00e0 pr\u00e9sent remplir notre texte avec autre chose qu'une unique couleur ; avec les  on peut\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":253,"url":"https:\/\/geekcommunicant.com\/blog\/2014\/01\/23\/javascripthtml5-tout-est-dans-le-placement\/","url_meta":{"origin":1000,"position":2},"title":"[JavaScript\/HTML5] Tout est dans le placement","author":"geekc","date":"23\/01\/2014","format":false,"excerpt":"\u00c0 la fin de l'article pr\u00e9c\u00e9dent j'avais utilis\u00e9 une image comme motif. Comme on ne pouvait pas le deviner l'image utilis\u00e9e \u00e9tait la suivante. Les canvas ne permettent pas de placement pr\u00e9cis des motifs. Mais il existe un moyen: le compositage. Cette m\u00e9thode fonctionne un peu comme les calques et\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/summer-girls-13.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":848,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/07\/01\/carte-interactive-rues-sans-megots-openlayers\/","url_meta":{"origin":1000,"position":3},"title":"Carte interactive des rues sans m\u00e9gots avec OpenLayers","author":"geekc","date":"01\/07\/2019","format":false,"excerpt":"Bon, je suppose que vous commencez \u00e0 avoir l\u2019habitude que je vous pr\u00e9sente la mani\u00e8re de cr\u00e9er une carte interactive \u00e0 l\u2019aide des deux librairies majeures OpenLayers et Leaflet. Apr\u00e8s avoir rapidement cr\u00e9\u00e9 la carte des rues et sections de rue concern\u00e9es par l\u2019op\u00e9ration \u00ab\u00a0Des rues sans m\u00e9gots\u00a0\u00bb avec Leaflet,\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":798,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/06\/03\/horloge-hexagonale\/","url_meta":{"origin":1000,"position":4},"title":"Une horloge hexagonale","author":"geekc","date":"03\/06\/2019","format":false,"excerpt":"\u00c0 la suite de mes premi\u00e8res exp\u00e9rimentations avec les canvas (voir mes trois premiers articles \u00e9tiquet\u00e9s #canvas) et de la consultation r\u00e9cente de pages traitant de la cr\u00e9ation d\u2019horloges utilisant cette technologie, j\u2019ai d\u00e9cid\u00e9 d\u2019en cr\u00e9er une \u00e0 ma fa\u00e7on. Pour mon horloge, j\u2019ai voulu le faire de mani\u00e8re originale,\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/hexa_digits.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1058,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/06\/retour-compteur-caracteres\/","url_meta":{"origin":1000,"position":5},"title":"Le retour du compteur de caract\u00e8res","author":"geekc","date":"06\/01\/2023","format":false,"excerpt":"Apr\u00e8s \u00eatre revenu derni\u00e8rement sur ma s\u00e9rie de tutos d\u2019introduction aux canvas, j\u2019ai d\u00e9cid\u00e9 de m\u2019attaquer \u00e0 l\u2019un de mes anciens articles me valant le plus d\u2019affichage sur le moteur de recherche d\u2019Alphabet\u00a0: le compteur de caract\u00e8res. Comme pour mes derniers articles traitant de JavaScript, une fois de plus je\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=1000"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1000\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=1000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=1000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=1000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}