{"id":211,"date":"2013-08-11T19:23:50","date_gmt":"2013-08-11T18:23:50","guid":{"rendered":"http:\/\/geekcommunicant.com\/blog\/?p=211"},"modified":"2019-05-02T15:44:26","modified_gmt":"2019-05-02T13:44:26","slug":"amusons-nous-avec-les-canvas","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2013\/08\/11\/amusons-nous-avec-les-canvas\/","title":{"rendered":"[JavaScript\/HTML5] Amusons-nous avec les canvas"},"content":{"rendered":"\n<p>Aujourd&rsquo;hui nous allons voir comment ajouter du texte aux nouveaux \u00e9l\u00e9ments <code>&lt;canvas&gt;<\/code> du HTML5.<\/p>\n\n\n\n<p>Comme les plus attentifs d&rsquo;entre-vous l&rsquo;auront d\u00e9j\u00e0 remarqu\u00e9, le titre de l&rsquo;article r\u00e9v\u00e8le d\u00e9j\u00e0 une partie du contenu de l&rsquo;article ; effectivement, pour utiliser les canvas, il faut obligatoirement passer par JavaScript.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Le HTML<\/h2>\n\n\n\n<p>La d\u00e9claration d&rsquo;un canvas est on ne peut plus simple:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;canvas id=&quot;canvas&quot; width=&quot;500&quot; height=&quot;250&quot;&gt;&lt;\/canvas&gt;\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">Le Javascript<\/h2>\n\n\n\n<p>Pour toute action sur un canvas, il faut s\u00e9lectionner son canvas, via son id, puis il faut s\u00e9lectionner son contexte. Toutes les actions suivantes se feront via ce contexte.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/On s\u00e9lectionne notre \u00e9l\u00e9ment\nvar c = document.getElementById(&#039;canvas&#039;);\n\/\/On s\u00e9lectionne notre contexte\nvar ctx = c.getContext(&#039;2d&#039;);\n<\/pre><\/div>\n\n\n<p>Note: \u00e0 la mani\u00e8re du <code>$(document).ready()<\/code> de jQuery, notre code JS doit \u00eatre plac\u00e9 dans une fonction ex\u00e9cut\u00e9e au <code>window.onload<\/code>.<\/p>\n\n\n\n<p>Bon, maintenant passons aux choses s\u00e9rieuses: comment ajoute t-on du texte \u00e0 notre canvas ; cela s&rsquo;effectue simplement en utilisant la m\u00e9thode <code>fillText()<\/code> sur notre canvas, tout en ayant auparavant choisis la police, la taille, l&rsquo;alignement, ainsi que le remplissage de notre texte (pour l&rsquo;instant une simple couleur).<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/On r\u00e8gle la police et la taille du texte\nctx.font = &#039;85px Impact&#039;;\n\/\/On r\u00e8gle l&#039;alignement de notre texte\nctx.textAlign = &#039;center&#039;;\n\/\/On r\u00e8gle la couleur de remplissage\nctx.fillStyle = &#039;#000&#039;;\n\/\/Et voil\u00e0 le moment tant attendu, l&#039;utilisation de drawText(*notre texte*,x,y)\nctx.fillText(&#039;Test&#039;,0,0);\n<\/pre><\/div>\n\n\n<p>Si vous essayez ce code &#8211; et je suis s\u00fbr que vous allez le faire ;-) &#8211; vous ne voyez rien\u2026 Rassurez-vous, cela n&rsquo;est pas un bug. En effet, si dans le canvas les coordonn\u00e9es se calculent bien \u00e0 partir du coin sup\u00e9rieur gauche, le point de rep\u00e8re d&rsquo;un \u00e9lement texte est le coin <strong>inf\u00e9rieur<\/strong> gauche.<\/p>\n\n\n\n<p>Voici un code correct:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nctx.font = &#039;85px Impact&#039;;\nctx.textAlign = &#039;center&#039;;\nctx.fillStyle = &#039;#000&#039;;\nctx.fillText(&#039;Summer&#039;,250,100);\nctx.fillText(&#039;is magic&#039;,250,180);\n<\/pre><\/div>\n\n\n<p>Le code ci-dessus nous donne le r\u00e9sultat suivant:<br><\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/geekcommunicant.com\/iframes\/canvas01.html\" width=\"100%\" height=\"300\"><\/iframe>\n\n\n\n<p>Maintenant, je t&rsquo;entend dire (oui, toi, lecteur) \u00ab Oui, mais les polices syst\u00e8me c&rsquo;est d\u00e9pass\u00e9, l&rsquo;avenir c&rsquo;est les web-fonts \u00bb. Ne d\u00e9sesp\u00e8re pas jeune codeur, il est possible d&rsquo;utiliser ces polices avec les canvas, mais la m\u00e9thode \u00e0 utiliser est assez \u00e9trange.<\/p>\n\n\n\n<p>En effet, on pense que l&rsquo;appel \u00e0 notre police<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;link href=&quot;https:\/\/fonts.googleapis.com\/css?family=Knewave&quot; rel=&quot;stylesheet&quot; type=&quot;text\/css&quot;&gt;\n<\/pre><\/div>\n\n\n<p>et son attribution \u00e0 notre texte<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nctx.font = &#039;85px Knewave&#039;;\n<\/pre><\/div>\n\n\n<p>suffisent, mais il n&rsquo;en est rien. En effet, il faut d&rsquo;abord que notre police ai \u00e9t\u00e9 attribu\u00e9e \u00e0 au moins un \u00e9l\u00e9ment de notre document:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\nbody {\n    font-family:Knewave;\n}\n<\/pre><\/div>\n\n\n<p>Notre police provenant d&rsquo;un autre serveur, avant toute action sur le canvas, il faut s&rsquo;assurer qu&rsquo;elle soit charg\u00e9e. Pour cela, rien de bien compliqu\u00e9, un simple <code>setTimeout<\/code> suffit.<\/p>\n\n\n\n<p>Notre code devient donc:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nsetTimeout(function(){\n\tvar c = document.getElementById(&#039;canvas&#039;);\n\tvar ctx = c.getContext(&#039;2d&#039;);\n\tctx.font = &#039;85px Knewave&#039;;\n\tctx.textAlign = &#039;center&#039;;\n\tctx.fillStyle = &#039;#000&#039;;\n\tctx.fillText(&#039;Summer&#039;,250,100);\n\tctx.fillText(&#039;is magic&#039;,250,180);\n},1000);\n<\/pre><\/div>\n\n\n<p>Et nous donne le r\u00e9sultat suivant:<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/geekcommunicant.com\/iframes\/canvas02.html\" width=\"100%\" height=\"300\"><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Et oui, nous voil\u00e0 d\u00e9j\u00e0 rendus \u00e0 la fin de ce tutoriel. Nous verrons dans un (ou plusieurs) autre(s) article(s) les autres modes de remplissage possibles avec les canvas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bonus<\/h2>\n\n\n\n<p>Il est \u00e9galement possible de rajouter des ombres \u00e0 notre texte, et ce tr\u00e8s simplement : c&rsquo;est un r\u00e9glage de notre contexte:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nsetTimeout(function(){\n\tvar c = document.getElementById(&#039;canvas&#039;);\n\tvar ctx = c.getContext(&#039;2d&#039;);\n\tctx.font = &#039;85px Knewave&#039;;\n\tctx.textAlign = &#039;center&#039;;\n\tctx.fillStyle = &#039;#000&#039;;\n\tctx.shadowColor = &#039;#000&#039;; \/\/Couleur de notre ombre\n\tctx.shadowBlur = 20; \/\/Rayon de floutage\n\tctx.fillText(&#039;Summer&#039;,250,100);\n\tctx.fillText(&#039;is magic&#039;,250,180);\n},1000);\n<\/pre><\/div>\n\n\n<p>Nous obtenons alors ce r\u00e9sultat:<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/geekcommunicant.com\/iframes\/canvas03.html\" width=\"100%\" height=\"300\"><\/iframe>\n\n\n\n<p>Note: \u00e0 cause d&rsquo;un bug connu, il est possible que sous Chrome l&rsquo;ombre n&rsquo;apparaisse pas de mani\u00e8re optimale (ou pas du tout).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aujourd&rsquo;hui nous allons voir comment ajouter du texte aux nouveaux \u00e9l\u00e9ments &lt;canvas&gt; du HTML5. Comme les plus attentifs d&rsquo;entre-vous l&rsquo;auront d\u00e9j\u00e0 remarqu\u00e9, le titre de l&rsquo;article r\u00e9v\u00e8le d\u00e9j\u00e0 une partie du contenu de l&rsquo;article ; effectivement, pour utiliser les canvas, &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2013\/08\/11\/amusons-nous-avec-les-canvas\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/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],"class_list":["post-211","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-canvas"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-3p","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":253,"url":"https:\/\/geekcommunicant.com\/blog\/2014\/01\/23\/javascripthtml5-tout-est-dans-le-placement\/","url_meta":{"origin":211,"position":0},"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 &quot;JavaScript&quot;","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":230,"url":"https:\/\/geekcommunicant.com\/blog\/2013\/08\/22\/et-maintenant-ajoutons-quelques-couleurs\/","url_meta":{"origin":211,"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 <canvas> nous pouvons \u00e0 pr\u00e9sent remplir notre texte avec autre chose qu'une unique couleur ; avec les <canvas> on peut\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1000,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/16\/amusons-nous-avec-canvas-retour\/","url_meta":{"origin":211,"position":2},"title":"Amusons-nous avec les canvas &#8211; le retour","author":"geekc","date":"16\/12\/2022","format":false,"excerpt":"Il y a quelques ann\u00e9es, j\u2019avais \u00e9crit une s\u00e9rie d\u2019articles expliquant comment cr\u00e9er \u00e0 l\u2019aide du\u00a0 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 fait de nouveaux essais de mon c\u00f4t\u00e9, je pense qu\u2019il\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","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\/image.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1220,"url":"https:\/\/geekcommunicant.com\/blog\/2024\/03\/01\/automatiser-clic-fortunes-cookie-clicker\/","url_meta":{"origin":211,"position":3},"title":"Automatiser le clic sur les fortunes de Cookie Clicker","author":"geekc","date":"01\/03\/2024","format":false,"excerpt":"Aujourd\u2019hui, apr\u00e8s avoir effectu\u00e9 une ascension sur Cookie Clicker, je me suis dit : \u201cSi je veux d\u00e9bloquer les fortunes (qui apparaissent dans le fil d\u2019actualit\u00e9s), il va falloir encore que je reste attentif devant mon \u00e9cran\u2026\u201d. C\u2019est alors que je me suis demand\u00e9 s\u2019il n\u2019y avait pas moyen d\u2019automatiser\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":848,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/07\/01\/carte-interactive-rues-sans-megots-openlayers\/","url_meta":{"origin":211,"position":4},"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 &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1096,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/02\/03\/fenetre-modale-javascript-natif\/","url_meta":{"origin":211,"position":5},"title":"Une fen\u00eatre modale en JavaScript natif","author":"geekc","date":"03\/02\/2023","format":false,"excerpt":"Aujourd\u2019hui, nouveau retour sur un de mes anciens tutoriels qui a rencontr\u00e9 un certain succ\u00e8s, mon tutoriel sur comment faire une fen\u00eatre modale avec jQuery. Depuis maintenant \u00e0 peu pr\u00e8s un an, tous les navigateurs majeurs supportent la balise <dialog> qui permet de cr\u00e9er des fen\u00eatres modales (\u00e7a \u00e7a tombe\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","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\/211","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=211"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/211\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}