Archives de
Étiquette : Canvas

HTML 5 et sa balise canvas

HTML 5 et sa balise canvas

Avec l’arrivée du HTML5, une nouvelle balise voit le jour : la balise canvas. Outil de dessin puissant, elle permet au développeur de créer des animations ou des jeux, beaucoup plus rapides et modulables qu’avec des balises HTML, directement sur le navigateur, sans plugin.

Mais alors, que permet cette balise ?
Est-elle simple d’utilisation ?
Quelles sont ses forces et ses faiblesses ?
Qui sont ses concurrents ?
Plein de questions auxquelles nous allons essayer de répondre.

Que permet-elle ?

Faire des animations, des bannières, des applications, des jeux etc… Tout ça sur votre navigateur, sans plugin. Mais plutôt que des mots, des exemples.

Des démos techniques :

Des jeux :


L’utiliser

Même si c’est une balise HTML, tout se passe en Javascript. Il faut donc pour commencer maîtriser un minimum le Javascript.

On commence par initialiser une balise canvas dans son .html.

<canvas id="canvas">
    Message qui s'affichera si la balise n’est pas supportée par le navigateur
</canvas>

Côté Javascript, on va récupérer la balise et la traiter un petit peu.

var canvas  = document.getElementById("canvas");
var context = canvas.getContext("2d");

Et c’est tout. A partir de ce contexte vous allez pouvoir tout faire. Par exemple :

context.drawImage(img, x, y);          //Afficher une image
context.fillStyle = "red";             //Changer la couleur de remplissage
context.fillRect(x, y, width, height); //Dessiner un carré plein (du coup rouge dans notre cas)
//etc...

Comme je ne vais pas vous écrire la documentation pour le canvas :

Hey ne partez pas ! Ce n’est pas parce que je vous donne des liens vers de la doc que je vais vous laisser tomber !

Il y a une fonction Javascript récente qui va nous être très utile pour faire du travail propre en canvas! Si vous avez déjà fait des petits scripts avancés en Javascript, vous avez sûrement déjà rencontré setTimeout et / ou setInterval.
Ce sont deux fonctions de timer en Javascript. Bon, pour elles, rien de nouveau: s’il est possible de faire de l’animation avec celles-ci, ce n’est pas une bonne idée. Vos boucles ne seront pas calculées en fonction du rafraîchissement de l’écran et vous pourrez donc avoir deux boucles qui s’exécutent (donc deux déplacements par exemple) avant un affichage.
En bref, elles ne sont pas faites pour de l’animation !

C’est pourquoi désormais nous avons requestAnimationFrame ! Parfaite pour de l’animation. Pourquoi parfaite ? Pour faire simple, cela va nous permettre de créer une boucle infinie, qui va s’exécuter de façon synchronisée avec le rafraîchissement de l’écran pour votre navigateur.

Mais comment fonctionne requestAnimationFrame ?
En schématisant un peu, vous appelez requestAnimationFrame et lui passez une fonction qui contient le code de votre animation. Quand le navigateur rafraîchira l’écran, il exécutera le code contenu dans la fonction !

Dans cette fonction que va exécuter le navigateur, on va lui passer un nouveau requestAnimationFrame avec notre code. Nous avons ainsi une boucle de calcul qui s’exécute à l’infini pour chaque rafraîchissement de l’écran.

Voici ce que ça donne dans le code :

function run () {
    /* On l’appelle dès le début, après le prochain
    rafraîchissement d’écran, run sera rappelé, et ainsi de suite */
    requestAnimationFrame(run);  

    //Notre code à effectuer pour chaque rafraîchissement d'écran.
}

Si vous voulez aller plus loin sur l’aspect technique, vous pouvez lire cet article.


Autour de canvas

Des tutoriels intéressants :

Il n’existe pas encore d’éditeurs de code spécifiques pour canvas comme flash develop pour flash ou code::block pour le c.
Cependant on commence à trouver pas mal de librairies et de frameworks :

  • Phaser. Un framework de jeu.
  • Box2DJS. Pour faire de la physique.
  • Fabric. Pour créer et manipuler des objets facilement sur le canvas.


Un flash killer ?

On connaît tous les jeux flash, certains sites n’étant même que des bibliothèques de ceux-ci.
Flash est le concurrent direct de notre petite balise canvas.
Et oui, on peut faire la même chose en flash qu’en canvas, alors pourquoi l’un plutôt que l’autre ?

Flash a été lancé en 1996, et continue à être mis à jour. Il a été le sauveteur des animations web. Aucun concurrent pour lui à l’époque, il était la solution.
Forcément, en 18 ans d’existence, Flash possède une énorme communauté, une solution à quasiment tous les problèmes sur 20 forums différents, que ce soit pour l’animation ou de l’actionscript, beaucoup de librairies, des environnements pour programmer.

Canvas a lui, de la documentation… (bon j’exagère un peu).

Oui mais. Parce qu’il y a un mais, et même plusieurs.
Le plus important c’est que Flash n’est pas natif au navigateur. Il appartient à une société, Adobe, or c’est la w3c qui s’occupe de la “normalisation” des services web, pour que tous les navigateurs fassent la même chose.

Et donc ? Tout le monde a Flash player installé sur son ordinateur.
Eh bien plus maintenant, et ce sont de grosses entreprises qui s’en mêlent, comme Google ou Apple. Et c’est tout à leur avantage d’utiliser une norme, plutôt que d’utiliser une technologie qui appartient à quelqu’un et qui en fait ce qu’il veut.

Google vous prévient qu’un site comporte du Flash sur vos mobiles et pourrait ne pas fonctionner. Les nouveaux systèmes Android ne supportent plus Flash. Googlemaps va être désactivé pour Flash.

Apple critique énormément Flash, le tenant responsable de certains crashes de navigateurs. Apple refuse lui aussi Flash sur ses périphériques mobiles.

En conséquence, Adobe arrête les mise à jours de Flash pour mobile.
Il est important de noter aussi que la plupart des logiciels pour Flash sont payants.

Le débat du HTML5 Flash killer est assez récurrent sur la toile et évolue de jour en jour.


Pour conclure

Même si canvas est encore jeune, il semble avoir déjà été adopté par beaucoup de monde, et sollicité par de grosses entreprises, ce qui lui présage un avenir très intéressant. Canvas arrive dans une ère où les navigateurs et le Javascript commencent à être très puissants, il suffit de regarder des technologies comme asm.js émerger, des jeux unity fonctionner avec un simple plugin. Il ne serait plus étonnant de voir le prochain gros mmorpg/moba tourner sur navigateur.

Les navigateurs web entrent dans une nouvelle ère. Canvas en fait partie. Seul l’avenir nous dira comment cela évoluera.