//*****************************************************************************//
//************************************ SCRIPT *********************************//
//*****************************************************************************//
// var c = document.getElementById("mon_canvas");
// var ctx = c.getContext("2d");
// ctx.beginPath();      // Début du chemin
// ctx.moveTo(400,200);    // Le tracé part du point 400,200
// ctx.lineTo(400,600);  // Un segment est ajouté vers 400,600
// ctx.lineTo(200,400);   // Puis on saute jusqu'à 200,400
// ctx.closePath();      // Fermeture du chemin (facultative)
// ctx.fillStyle = "orange"; // Définition de la couleur de remplissage
// ctx.fill();
// ctx.strokeStyle = "black";
// ctx.stroke();


// function draw(options)
// {
//   ctx.strokeStyle = 'rgba('+options['rgba']+')';
//   ctx.fillStyle = 'rgba('+options['rgba']+')';
//   ctx.lineWidth = options['size'];
//   ctx.beginPath();
//   ctx.moveTo(options['x1'], options['y1']);
//   ctx.lineTo(options['x2'], options['y2']);
//   ctx.stroke();
//   ctx.closePath();
// }

// ctx.beginPath();      // Début du chemin
// ctx.moveTo(400,200);    // Le tracé part du point 400,200
// ctx.lineTo(600,400);  // Un segment est ajouté vers 600,400
// ctx.lineTo(400,600);   // Puis on saute jusqu'à 400,600
// ctx.closePath();      // Fermeture du chemin (facultative)
// ctx.fillStyle = "green"; // Définition de la couleur de remplissage
// ctx.fill();
// ctx.strokeStyle = "black";
// ctx.stroke();
/*
retrouver sur le site de Jquery : 
la fonction quand le clic est appuyé, 
la fonction quand le clic est enfoncé,
la fonction quand le clic est relaché
la fonction qui recupere la position de la souris
*/

var c = document.getElementById("mon_canvas");
var ctx = c.getContext("2d");
var dom = $("#mon_canvas");
var isDrawing = false;
ctx.strokeStyle = "black";
ctx.fillStyle = "black";
ctx.lineWidth = 10;

$('canvas').on('color', function(e, rgba)
{
    ctx.strokeStyle = 'rgba('+rgba+')';
    ctx.fillStyle = 'rgba('+rgba+')';
});
$('canvas').on('size', function(e, size)
{
    ctx.lineWidth = size;
});

dom.mousedown(function(event) {
    isDrawing = true;
  	ctx.beginPath();
  	ctx.moveTo(event.pageX, event.pageY);  
});

dom.mousemove(function(event)
{
  if(isDrawing)
  {
    ctx.lineTo(event.pageX, event.pageY);
    ctx.stroke();
  }
});

dom.mouseup(function(event)
{
  isDrawing = false;
  ctx.closePath();
});

@@ -1911,16 +1911,69 @@
 h = 10;%0A
+var x1, x2, y1, y2, color, size;%0Acolor = '0,0,0,1';%0A%0A
 %0A$('canv
@@ -2087,16 +2087,34 @@
 ba+')';%0A
+    color = rgba;%0A
 %7D);%0A$('c
@@ -2144,16 +2144,19 @@
 tion(e, 
+new
 size)%0A%7B%0A
@@ -2175,16 +2175,39 @@
 Width = 
+newsize;%0A    size = new
 size;%0A%7D)
@@ -2323,16 +2323,60 @@
 .pageY);
+%0A    x1 = event.pageX;%0A    y1 = event.pageY;
   %0A%7D);%0A%0A
@@ -2477,101 +2477,299 @@
     
-ctx.stroke();%0A  %7D%0A%7D);%0A%0Adom.mouseup(function(event)%0A%7B%0A  isDrawing = false;%0A  ctx.closePath();%0A%7D);
+x2 = event.pageX;%0A    y2 = event.pageY;%0A    ctx.stroke();%0A    sendData(x1, x2, y1, y2, color, size);%0A  %7D%0A%7D);%0A%0Adom.mouseup(function(event)%0A%7B%0A  isDrawing = false;%0A  ctx.closePath();%0A%7D);%0A%0A// function sendData(x1, y1, x2, y2, color, size)%0A// %7B%0A//     console.log(x1, y1, x2, y2, color, size);%0A// %7D%0A
 %0A

update script