Le dessin avec canvas et JavaScript

Nathanaël Cherrier -

Aujourd’hui, j’ai expérimenté le dessin grâce à HTML5 et JS. Et oui, vous pouvez dessiner dans ses langages ! Je vous montre ?

Alors, pour commencer on va faire la partie HTML5. C’est la partie simple (bien que le reste ne soit pas très compliqué non plus). Nous allons utiliser <canvas>. C’est cette balise qui va contenir notre dessin. Elle fait partie du standard développé par le W3C et à été prévue pour dessiner en 2D et en 3D. Nous ne verrons que la partie 2D dans cet article.

<html>
    <head>
        <meta charset="utf-8"/> 
        <title>Canvas</title> 
        <script type="text/javascript" src="/js/canvas.js"></script>   
    </head>
    <body>
        <canvas id="board" height="450" width="600"> </canvas>
    </body>
</html>

Ensuite c’est dans notre fichier canvas.js que tout va se passer. Il faut récupérer notre canvas et préciser son contexte (mode) de dessin. C’est à dire que notre navigateur à besoin qu’on lui précise quel genre de dessin nous allons faire : 2D ? 3D ?

En JS ça se traduit comme ça (je vous mets l’équivalent en JQuery aussi) :

var canvas = document.getElementById('board'); var board = canvas.getContext('2d');

var canvas = $('#board'); 
var board = canvas.getContext('2d'); 
// Ou 
var board = $('#board').getContext('2d');

Pour personnaliser les lignes que l’on trace, on dispose de plusieurs propriétés. Je les définis toujours au début pour ne pas en oublier mais dans d’autres cas ça ne sera pas forcément judicieux (Si il y a interactions avec l’utilisateur par exemple. Si c’est l’utilisateur qui dessine)

board.lineJoin = "round"; // Ces deux fonctions permettent d'arrondir 
board.lineCap = "round"; // les extrémités et liaisons d'une ligne 
board.strokeStyle = "#2c3e50"; // définit la couleur d'une ligne 
board.lineWidth = 1; // définit la largeur d'une ligne

Et enfin, on va dessiner la ligne :

board.beginPath(); // commence la ligne (tracé) 
board.moveTo(50, 50); // abscisse et ordonnée du point de départ d'un segment de la ligne 
board.lineTo(100, 120); // abscisse et ordonnée du point final d'un segment de la ligne 
board.stroke(); // dessine le contour de la ligne (du tracé)

Faites attention, l’abscisse et l’ordonnée se calculent par rapport au coin supérieur gauche du canvas.

Conclusion :

A quoi ça peut bien servir de dessiner en HTML5 et JS ? Je suis sûr que cela peut servir dans pleins de cas différents mais moi j’en ai déjà un en tête pour l’exemple.

Imaginons que vous vouliez créer un outil de dessin en ligne. Un genre de « paint » mais pour le web. Et bien HTML5 (et JS) nous fournit des outils simples et supportés par (presque) tous les navigateurs récents. Plus besoin de charger de lourdes bibliothèques JS et apprendre à les utiliser pour pouvoir dessiner, tout est fourni de base et c’est vraiment vraiment simple. Que demande le peuple ?