Application de dessin

**aertys** · 03/05/2015, 21h18

excusez moi du retard de ma réponse mais je ne suis pas encore très sur de moi, j'ai regardé sur différents sites comment utiliser les canvas et je crois avoir réussi. Voici donc mes codes JS et HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
(function() {
     window.addEventListener('load', function () {
    var canvas = document.getElementById('mon_canvas');
        if (!canvas) {
            alert("Impossible de récupérer le canvas");
            return;
        }
        canvas.style.width = '100%';
        canvas.style.height = '100%';
    var context = canvas.getContext('2d');
        if (!context) {
            alert("Impossible de récupérer le context du canvas");
            return;
        }
     var myhtml = document.getElementsByTagName("html") [0],
         mybody = document.getElementsByTagName("body") [0], 
         posX,
         posY,
         bouge;
          mybody.style.width = '100%';   
          mybody.style.height = '100%';
          mybody.addEventListener('mousedown', function () {
                bouge = true;
          }, false);
          mybody.addEventListener('mousemove', function (e) {
                if (bouge == true) {
                    posX = e.clientX + 'px';
                    posY = e.clientY + 'px';
                    context.fillRect(e.clientX,e.clientY,2,2);
/*                    var div = document.createElement('div');
                    div.style.width = '5px';
                    div.style.height = '5px';
                    div.style.backgroundColor = 'black';
                    div.style.position = 'absolute';
                    div.style.left = posX;
                    div.style.top = posY;
                    mybody.appendChild(div); */
                }
          }, false);
          mybody.addEventListener('mouseup', function () {
                bouge = false;
          }, false);
     }, false);
})();

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<html>
     <body>
        <canvas id="mon_canvas"></canvas>
          <script type='text/javascript' src='../../js/dessin.js'></script>
     </body>
</html>

**NoSmoking** · 08/05/2015, 16h14

● Tout d'abord l'écriture de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
mybody.style.width = '100%';   
mybody.style.height = '100%';

est maladroite, il est préférable de mettre cela directement dans le CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
html, body{
  padding:0;
  margin:0;
  background:#FFF;
  width:100%;
  height:100%;
}

par exemple.

● Affecter une largeur/hauteur au CANVAS en % est source d'erreur en effet seule la partie chiffre sera pris en compte donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
canvas.style.width = '100%';
canvas.style.height = '100%';

donnera un CANVAS de 100 par 100 pixel ce qui engendrera des aberrations dans la suite de ton code (voir The canvas element)

Donc il vaut donc mieux écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
/*-- Ajuste le canvas --*/
canvas.setAttribute('width',  mybody.offsetWidth);
canvas.setAttribute('height', mybody.offsetHeight);

● Concernant context.fillRect(e.clientX,e.clientY,2,2) cela entrainera le fait qu'il n'y aura pas de continuité dans le tracé, mais peut être est cela que tu souhaites, j'utiliserais plutôt un context.lineTo( pos.x, pos.y) en ayant pris soin de faire un context.moveTo( pos.x, pos.y) sur le mousedown.

● Concernant la récupération de la position de la souris, dans ton cas comme il n'y a pas de décalage de ton CANVAS par rapport au document tu pourrais laisser tel que, mais si ton CANVAS se trouve dans d'autres éléments tu auras un décalage du tracé, je te propose celle ci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function getMousePos(event) {
    var rect = this.getBoundingClientRect();
    return {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top
    }
}

de plus autant mettre les écouteurs sur celui ci.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
canvas.addEventListener('mousedown', function (e) {
    var pos= getMousePos.call( this, e);  // récup. position de la mouse
    context.beginPath();
    context.moveTo( pos.x, pos.y);        // positionnement du début du tracé
}, false);

● Au final le code pourrait ressembler à cela

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
(function() {
    window.addEventListener('load', function() {
        function getMousePos(event) {
            var rect = this.getBoundingClientRect();
            return {
                x: event.clientX - rect.left,
                y: event.clientY - rect.top
            }
        }
 
        var canvas = document.getElementById('mon_canvas');
        if (!canvas) {
            alert("Impossible de récupérer le canvas");
            return;
        }
        var context = canvas.getContext('2d');
        if (!context) {
            alert("Impossible de récupérer le context du canvas");
            return;
        }
        var myhtml = document.getElementsByTagName("html")[0],
            mybody = document.getElementsByTagName("body")[0],
            bouge;
        /*-- Ajuste le canvas --*/
        canvas.setAttribute('width', mybody.offsetWidth);
        canvas.setAttribute('height', mybody.offsetHeight);
        /*-- init du context --*/
        context.strokeStyle = "red"
        context.lineWidth = 2;
 
        canvas.addEventListener('mousedown', function(e) {
            pos = getMousePos.call(this, e)
            bouge = true;
            context.beginPath();
            context.moveTo(pos.x, pos.y);
        }, false);
        canvas.addEventListener('mousemove', function(e) {
            if (bouge == true) {
                pos = getMousePos.call(this, e);
                context.lineTo(pos.x, pos.y);
                context.stroke();
            }
        }, false);
        canvas.addEventListener('mouseup', function() {
            context.closePath();
            bouge = false;
        }, false);
 
    }, false);
})();

et avec le CSS suivant cela devrait être pas mal

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
html, body{
  padding:0;
  margin:0em;
  background:#FFF;
  width:100%;
  height:100%;
}
canvas {
  display:block;
  cursor: crosshair;
}

**aertys** · 14/05/2015, 13h43

Merci beaucoup ça marche super bien maintenant!

**aertys** · 25/05/2015, 12h00

bonjour, petite rectification:
cela marchait super bien sous mon html, en fait jusqu'au rajout d'un alert()
d'autre part, mon site étant codé en php, cela donne ceci, à présent:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<?php
 
function aff_questionnaire_art () {
 
$title = 'Questionnaire - Histoire de l\'Art';
$css = 'questionnaire';
$icon = 'favicon_qart';
 
        include ('templates/head.php');
 
	echo ("  
		<h1>QUESTIONNAIRE - HISTOIRE DE L'ART</h1>
		<div id='QUEST'></div>
		<button id='v' title='Une bonne/mauvaise réponse augmente/diminue votre score d'un point'>VALIDER</button>
		<button id='a' title='Retour à l'accueil'>ABANDONNER</button>
		<button id='p' title='Pas de réponse n'ajoute ni ne retire de point'>PASSER</button>
		
		<br /><br />
		
		<em id='time' >
		20
		</em>
		<script type='text/javascript' src='js/jquery.js'></script>
		<script type='text/javascript' src='js/questionnaire.js'></script>

	 </body> 
</html>
	");
 
}
 
function aff_api_dessin () {
 
$title = 'Application de dessin';
$css = 'dessin';
$icon = 'favicon_apides';
 
        include ('templates/head.php');
 
	echo ("  
     
        <canvas id='mon_canvas'>

        </canvas>
     
          <script type='text/javascript' src='js/dessin.js'> 
          
          </script>
          
     </body>
</html>
	");
 
}
 
function aff_mario_mouvant () { 
 
$title = 'Mario mouvant';
$css = 'mario_mouvant';
$icon = 'favicon_mlw';
 
        include ('templates/head.php');
 
	echo (" 	
		<script type='text/javascript' src='js/mario_mouvant_html.js'></script>
		<script type='text/javascript' src='js/mario_mouvant.js'></script>
		
	 </body> 
</html>
	");
 
}
 
?>

et mon js actuel:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
(function () {
    window.addEventListener ('load', function () {
 
        function getMousePos (event) { 
            var rect = this.getBoundingClientRect();
            return {
                x: event.clientX - rect.left
                y: event.clientY - rect.top
            }
        }
 
        alert("Bienvenue sur mon application de dessin. Vous pouvez ici dessiner en vous servant de la souris. Lors d'un clic gauche, vous verrez une trace noire apparaître."); 
        var canvas = document.getElementById('mon_canvas');
        if (!canvas) {
            alert("Impossible de récupérer le canvas");
            return;
        }
        var context = canvas.getContext('2d');
        if (!context) {
            alert("Impossible de récupérer le context du canvas");
            return;
        }
        var myhtml = document.getElementsByTagName("html")[0],
            mybody = document.getElementsByTagName("body")[0],
            bouge;
        /*-- Ajuste le canvas --*/
        canvas.setAttribute('width', mybody.offsetWidth);
        canvas.setAttribute('height', mybody.offsetHeight);
        /*-- init du context --*/
        context.strokeStyle = "black"
        context.lineWidth = "555";
 
        canvas.addEventListener('mousedown', function(e) {
            pos = getMousePos.call(this, e)
            bouge = true;
            context.beginPath();
            context.moveTo(pos.x, pos.y);
        }, false);
        canvas.addEventListener('mousemove', function(e) {
            if (bouge == true) {
                pos = getMousePos.call(this, e);
                context.lineTo(pos.x, pos.y);
                context.stroke();
            }
        }, false);
        canvas.addEventListener('mouseup', function() {
            context.closePath();
            bouge = false;
        }, false);
 
    }, false);
})();

tout semble fonctionner jusqu'au <script>

**NoSmoking** · 26/05/2015, 13h20

cela marchait super bien sous mon html, en fait jusqu'au rajout d'un alert()

d'autres choses ont du être modifiés car j’entrevois rapidement deux choses étranges.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
return {
    x: event.clientX - rect.left, /* MANQUE UNE VIRGULE pour que cela ne plante pas */
    y: event.clientY - rect.top
}

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
/*-- init du context --*/
context.strokeStyle = "black"
context.lineWidth = "555";  /* 555 c'est pas un peu GROS comme largeur de trait ? */

**aertys** · 27/05/2015, 22h38

merci je viens de corriger mon code.
cela dit le problème doit résider dans mon PHP car j'ai essayé chacune des 3 fonctions définies plus haut et, chacune semble fonctionner jusqu'à l'évocation du script (j'entends par là que le CSS et le HTML fonctionnent parfaitement mais que le JS est inexistant.).

**NoSmoking** · 28/05/2015, 16h27

Le mieux que tu ais à faire et de regarder le code HTML généré (CTRL + U).

**aertys** · 04/06/2015, 09h59

j'ai essayé, mais il s'aère qye j'avais un problemede js dans mes codes que j'ai résolut.
merci bien!

**aertys** · 04/06/2015, 15h07

Rebonjour

J'ai ajouté un bouton Sauvegarder, qui, lors d'un clic, m'affiche canvas.toDataURL() dans la console.
Maisj'obtiens ce résultat:

"data:image/png;base64,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AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACj7AYJIe/qVrC6wAAAAAElFTkSuQmCC" dessin.js:6:13

Est-ce que c'est bon (je m'attendais à du html) et comment le recharger?_____________________

**Bovino** · 04/06/2015, 15h17

Non, c'est correct. Copie colle tout ce qui est entre les guillemets dans la barre d'adresse du navigateur (ou dans l'attribut src d'une balise <img />) et tu verras le résultat.

**aertys** · 14/06/2015, 23h40

rebonjour,

j'ai voulu ajouter la possibilité de changer de couleur.

voici donc mes codes:

JS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
          var sel = document.getElementById('sel'),
          sb = sel.style.background;
          sel.addEventListener('change',function () {
                 switch (sel.value) {
                    case 'black':
               //sel.innerHTML = sel.value;
                         context.strokeStyle = "black";
                         break;
                    case 'red':
                         context.strokeStyle = "red";
                         break;
                    case 'white':
                         context.strokeStyle = "white";
                         break;
                    case 'green':
                         context.strokeStyle = "green";
                         break;
                    case 'blue':
                         context.strokeStyle = "blue";
                         break;
               }
               sel.style.background = sel.options[sel.selectedIndex].style.background;
 
          },false);

HTML:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
     <label for='sel'>Choisissez votre couleur :</label>
     <select name='sel'  id='sel'>
          <option value='black' id='bla'><img src='img/colors/black.jpg' alt='black'></option>
          <option value='white' id='w'><img src='img/colors/white.jpg' alt='white'></option>
 
          <option value='blue' id='blu'><img src='img/colors/blue.jpg' alt='blue'></option>
          <option value='red' id='r'><img src='img/colors/red.jpg' alt='red'></option>
          <option value='green' id='g'><img src='img/colors/green.jpg' alt='green'></option>
     </select>

CSS:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
html, body {
     padding: 0;
     margin: 0em;
     background: #FFF;
     width: 100%;
     height: 100%;
}
canvas {
     display: block;
     cursor:  crosshair;
     width: 100%;
     height: 100%;
}
#sel option {
     width: 26px;
     height: 21px;
}
#bla {
     background: no-repeat center center url('../../img/colors/black.jpg');
}
#w {
     background: no-repeat center center url('../../img/colors/white.jpg');
}
#blu {
     background: no-repeat center center url('../../img/colors/blue.jpg');
}
#g {
     background: no-repeat center center url('../../img/colors/green.jpg');
}
#r {
     background: no-repeat center center url('../../img/colors/red.jpg');
}

mon problème est que quand on est dans le select, les images s'affichent bien, et la couleur du pinceau aussi.
mais cette image sélectionnée ne s'affiche pas dans le select
Avez-vous -une idée?
Merci.

**NoSmoking** · 16/06/2015, 22h44

mais cette image sélectionnée ne s'affiche pas dans le select

Là c'est pas gagné

Si tu veux quelque chose de propre et parfaitement crossbrowser ... fais toi ton propre "select".

**melka one** · 17/06/2015, 10h34

jour

pourquoi tu utilise switch ? Il manque la declarasion de sel dans la fonction et il y a une virgule a la fin de la ligne pour premiere declaration de sel qui n'a rien a faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
var sel = document.getElementById('sel')
          sb = sel.style.background;
          sel.addEventListener('change',function (e) {
 
          var valeur = e.currentTarget.value;
 
          context.strokeStyle =valeur;
 
          sel.style.background = valeur;
 
          },false);

**NoSmoking** · 17/06/2015, 18h31

Il manque la declarasion de sel dans la fonction et il y a une virgule a la fin de la ligne pour premiere declaration de sel qui n'a rien a faire

pourtant le code de aertys, tout du moins la partie qui suit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var sel = document.getElementById('sel'),
    sb = sel.style.background;

me paraît préférable à la tienne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var sel = document.getElementById('sel')
    sb = sel.style.background;

sans la virgule en fin de ligne ta variable sel, non utilisée dans le code d'ailleurs, devient globale et écraser une autre définition, de plus accessoirement tu pourrais avoir des problèmes en cas de minification du code

Je suis néanmoins bien d'accord avec quand à l'utilisation du switch.

**aertys** · 05/07/2015, 14h22

rebonjour,
merci pour ces réponses je crois maintenant en avoir fini avec le select
j'ai compris également comment sauvegarder le dessin de l’utilisateur
mais maintenant je ne vois comment le recharger et surtout qu’il reste modifiable!

**melka one** · 05/07/2015, 16h41

tu peut utiliser localstorage pour la sauvegarde

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
function sauver(){
	var moncanvas = document.getElementById("cvs");
	var base64 = moncanvas.toDataURL("image/png");
	localStorage.setItem("mage", base64);
}

et pour restaurer l'image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function ouvrir(){  
 
	if(localStorage.getItem("mage")){
 
	  var image64 = localStorage.getItem("mage");
	  var ima = new Image();
	  ima.src=image64
	  ima.onload = function () {
 
	    document.getElementById("cvs").drawImage(ima, 0, 0);
		}
	}
}