jCanvas et sa méthode clearCanvas()

Bonjour,
j'utilise jCanvas pour générer des Canvas, j'ai un problème avec la méthode clearCanvas(). D'après ce que j'ai comprit ça efface le Canvas quand on l’exécute.
Pour un test j'ai tracé 3 cercles relié qui forme un triangle, puis pour un autre cercle j'ai essayé de tracé un belle arc deux cercles entre deux points ce qui est pas facile quand on débute... Je voulais pas enlever le code du premier exemple alors j'ai voulu l'effacer avec la méthode clearCanvas().
Ca fonctionne au chargement de la page, mais quand je click sur le canvas le premier exemple réapparaît et je vois pas pourquoi!!! Quelqu'un sait pourquoi ? Dans la logique ça ne devrait pas!
Mon but final après mes test c'est de pouvoir déplacer les cercles et donc les droites ou arc qui les relies aussi et vu mon problème ici ça risque de me poser problème.

Le code:

Code:

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<script src="jcanvas.min.js"></script>
<div id="canvastest" style="z-index:2;">
	<canvas id="style" width="15000" height="15000" style="z-index:2;border: 1px solid #FF9900;"></canvas>
</div>
 
<script>
$(document).ready(function () {
 
	var tailleWidth = 200;
	var tailleHeight = 120;
 
	$('#canvastest').css({'position': 'absolute', 'top': '0px', 'left': '0px'});	
 
// ----------
 
	var style = $('#style');
 
	style.drawArc({ // cercle div_4
		layer: true,
		fillStyle: 'red',
		shadowColor: '#000',
		shadowBlur: 10,  
		x: (710+tailleWidth), y: (200+tailleHeight),
		radius: 15,
		click: function(layer) {
		}
	});
 
	style.drawArc({ // cercle div_3
		layer: true,
		fillStyle: 'blue',
		shadowColor: '#000',
		shadowBlur: 10,  
		x: (894+tailleWidth), y: (21+tailleHeight),
		radius: 15,
		click: function(layer) {
		}
	});
 
	style.drawArc({ // cercle div_1
		layer: true,
		fillStyle: 'green',
		shadowColor: '#000',
		shadowBlur: 10, 
		x: (1085+tailleWidth), y: (759+tailleHeight),
		radius: 15,
		click: function(layer) {
		}
	});
 
 
	style.drawLine({ // droite div_3 et div_4
		layer: true,
		strokeStyle: '#000',
		strokeWidth: 5,
		x1: 710+tailleWidth, y1: 200+tailleHeight,
		x2: 894+tailleWidth, y2: 21+tailleHeight,
		click: function(layer) {
		}
	});
 
	style.drawLine({ // droite div_1 et div_4
		layer: true,
		strokeStyle: '#000',
		strokeWidth: 5,
		x1: (1085+tailleWidth), y1: (759+tailleHeight),
		x2: (710+tailleWidth), y2: (200+tailleHeight),
		click: function(layer) {
		}
	});
 
	style.drawLine({ // droite div_1 et div_3
		layer: true,
		strokeStyle: '#000',
		strokeWidth: 5,
		x1: (1085+tailleWidth), y1: (759+tailleHeight),
		x2: (894+tailleWidth), y2: (21+tailleHeight),
		click: function(layer) {
		}
	});
	style.clearCanvas();
 
// ----------
// exemple 2:
 
		style.drawArc({ // cercle 
			layer: true,
			fillStyle: 'red',
			shadowColor: '#000',
			shadowBlur: 10,  
			x: 300, y: 300,
			radius: 15,
			click: function(layer) {
				alert("cercle");
			}
		});
		style.drawArc({ // cercle 
			layer: true,
			fillStyle: 'red',
			shadowColor: '#000',
			shadowBlur: 10,  
			x: 600, y: 600,
			radius: 15,
			click: function(layer) {
			}
		});
 
 
		style.drawQuadratic({ // arc vert
			layer: true,
			strokeStyle: 'green',
			strokeWidth: 5,
			x1: 300, y1: 300, // Start point
			cx1: 600, cy1: 300, // Control point
			x2: 600, y2: 600, // End point,
			click: function(layer) {
			}
		});
 
		style.drawQuadratic({ // arc vert
			layer: true,
			strokeStyle: 'green',
			strokeWidth: 5,
			x1: 300, y1: 300, // Start point
			cx1: 300, cy1: 600, // Control point
			x2: 600, y2: 600, // End point,
			click: function(layer) {
			}
		});
 
		style.drawArc({ // cercle pour visualiser l'arc
			layer: true,
			fillStyle: 'green',
			shadowColor: '#000',
			shadowBlur: 10,  
			x: 600, y: 300,
			radius: 15,
			click: function(layer) {
			}
		});	
 
		style.drawArc({ // cercle pour visualiser l'arc 
			layer: true,
			fillStyle: 'green',
			shadowColor: '#000',
			shadowBlur: 10,  
			x: 300, y: 600,
			radius: 15,
			click: function(layer) {
			}
		});
 
		style.drawVector({ // Droite a angle droit
			layer: true,
			strokeStyle: 'blue',
			strokeWidth: 4,
			rounded: true,
			endArrow: true,
			arrowRadius: 15,
			arrowAngle: 90,
			x: 300, y: 300,
			a1: 180, l1: 300,
			a2: 90, l2: 300,
			click: function(layer) {
			}
		});
 
 
		style.drawVector({ // Droite a angle droit
			layer: true,
			strokeStyle: 'blue',
			strokeWidth: 4,
			rounded: true,
			endArrow: true,
			arrowRadius: 15,
			arrowAngle: 90,
			x: 300, y: 300,
			a1: 90, l1: 300,
			a2: 180, l2: 300,
			click: function(layer) {
			}
		});
 
// ---------- ---------- ---------- ---------- ---------- ---------- ----------  ---------- ---------- ---------- ---------- ---------- ----------
// ---------- ---------- ---------- ---------- ---------- ---------- ----------  ---------- ---------- ---------- ---------- ---------- ----------
// ---------- ---------- ---------- ---------- ---------- ---------- ----------  ---------- ---------- ---------- ---------- ---------- ----------
// ---------- ---------- ---------- ---------- ---------- ---------- ----------  ---------- ---------- ---------- ---------- ---------- ----------
 
});
</script>