Mini Paint HTML5 avec Canvas

J'ai réalisé un mini paint HTML5 grâce à la balise <canvas>. C'est plus une expérience afin de (re)découvrir et d'approfondir l'élément canvas. Ainsi je n'ai fait aucune modification pour assurer la compatibilité entre les navigateurs. Je l'ai testé sur Firefox et Chrome (dans leur dernière version). Ce dernier est à recommander car j'utilise un nouveau champs input (type="range") qui n'est pas encore implémenté sur Firefox (version 10). J'ai aussi utilisé jQuery bien que dispensable dans l'exemple, on peut largement s'en passer.

Voir la démo

Ce que permet mon mini paint :

Dessiner à l'aide d'un pinceau sur une zone de dessin (canvas),
Changer la couleur et la taille du pinceau,
Réinitialiser le canvas,
Exporter mon image finale au format PNG.

Nouveautés HTML5 utilisées :

Canvas,
Les attributs data-* HTML5,
Un nouveau type de champs input : input[type=range].

canvas

La balise <canvas> est une zone dans laquelle on peut afficher, dessiner, etc... Il dispose d'un contexte (2D ou 3D) avec lequel on va pouvoir dessiner grâce à Javascript.

exemple de définition d'un canvas :

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

Dans ce mini Paint, j'utilise la fonction lineTo() pour dessiner, elle permet de tracer une ligne entre 2 points. Dans mon cas, je récupère les points correpondant aux coordonnées de la souris lorsque je clique sur le canvas. Exemple d'un tracé :

context.beginPath(); // Je commence un nouveau dessin
context.moveTo(100,50); // Je me positionne une premi&egrave;re fois
context.lineTo(200,100); // Je tire un trait vers ces nouvelles coordonn&eacute;es
context.fill(); // Puis je dessine

data-*

c'est un nouveau attribut à placer dans n'importe quel balise afin de stocker des valeurs ensuite accessible via javascript. le symbole "*" est à remplacer par un libellé identifiant mon attribut. Dans mon exemple, je l'ai utilisé pour stocker mes couleurs :

<ul id="couleurs">
            <li><a href="#" data-couleur="#000000">Noir</a></li>
            <li><a href="#" data-couleur="#ffffff">Blanc</a></li>
            <li><a href="#" data-couleur="#ff0000">Rouge</a></li>
</ul>

Je m'en suis servi ensuite pour définir la couleur de fond de mes liens :

$("#couleurs a").each(function() {
        $(this).css("background", $(this).attr("data-couleur"));
 
});

input[type=range]

Ce nouveau type d'input s'utilise comme ceci :

<input type="range" min="2" max="50" value="5" id="largeur" />

Pour les navigateur le prenant en compte, cela va créer un input avec un curseur pouvant aller de 2 à 50 (attributs min et max). Comme le input[type=text], value correspond à la valeur définie, on peut aller récupérer la valeur de l'input comme ceci :

var valeur = $("#largeur").val();

Exporter l'image

L'export de l'image dessinée dans canvas se fait très simplement :

var canvas = document.getElementById("canvas"); // R&eacute;cup&eacute;ration du canvas
window.location = canvas.toDataURL("image/png"); // Redirection vers l'image au format PNG

Je laisse à disposition les sources. Le code Javascript est bien sûr commenté :)

Paint pour mobile tactile

J'ai repris le code ce Paint pour le rendre compatible sur Smartphone et Tablette, voici le lien :

Paint HTML5 pour mobile.

Pour cela, j'ai utilisé les évènements suivant :

touchstart : Notre doigt rentre en contact avec l'écran,
touchmove : On déplace notre doigt sur l'écran,
touchend : On retire notre doigt de l'écran.

Testé sur Iphone 4S, Ipad 2, Android 2.3. L'input type=range ne s'affiche bien que sur les machines d'Apple.

HTML5
Mobile