var currentPos, previousPos;

 var canvas, context, started;

​

function writeMessage(canvas, message) {

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

    context.clearRect(0, 0, canvas.width, canvas.height);

    context.font = '18pt Calibri';

    context.fillStyle = 'black';

    context.fillText(message, 10, 25);

}

​

function getMousePos(canvas, evt) {

    // get canvas position

    var obj = canvas;

    var top = 0;

    var left = 0;

    while (obj && obj.tagName != 'BODY') {

        top += obj.offsetTop;

        left += obj.offsetLeft;

        obj = obj.offsetParent;

    }

​

    // return relative mouse position

    var mouseX = evt.clientX - left + window.pageXOffset;

    var mouseY = evt.clientY - top + window.pageYOffset;

    return {

        x:mouseX,

        y:mouseY

    };

}

​

function getTouchPos(canvas, evt) {

    // get canvas position

    var obj = canvas;

    var top = 0;

    var left = 0;

    while (obj && obj.tagName != 'BODY') {

        top += obj.offsetTop;

        left += obj.offsetLeft;

        obj = obj.offsetParent;

    }

​

    // return relative touch position

    var touchX = evt.touches[0].clientX - left + window.pageXOffset;

    var touchY = evt.touches[0].clientY - top + window.pageYOffset;

    return {

        x:touchX,

        y:touchY

    };

}  

​

function clicked(evt) {

    previousPos = getMousePos(canvas, evt);

    started = true;

}

function released(evt) {

    started = false;

}

function drawLine(previousPos, currentPos) {

    context.beginPath();

    context.moveTo(previousPos.x, previousPos.y);

    context.lineTo(currentPos.x, currentPos.y);

    context.stroke();

}

​

function init () {

   canvas = document.getElementById('myCanvas');

    context = canvas.getContext('2d');

    started = false, previousPos;

​

    canvas.addEventListener('mousedown', clicked);

    canvas.addEventListener('mouseup', released);

  canvas.addEventListener('mouseout', function() {

    console.log("mouse out");

    released();

  }); 

  // On récupère l'épaisseur courante

  changeEpaisseur();

​

    canvas.addEventListener('mousemove', function (evt) {

       currentPos = getMousePos(canvas, evt);

        var message = "Mouse position: " + currentPos.x + "," + currentPos.y;

        // TRY TO UNCOMMENT THIS LINE !

        //writeMessage(canvas, message);

​

        // Let's draw some lines that follow the mouse pos

        if (started) {

            drawLine(previousPos, currentPos);

​

            previousPos = currentPos;

        }

    }, false);

​

    canvas.addEventListener("touchstart", function(event) {

        previousPos = getTouchPos(canvas, event);

        started = true;

    });

​

     canvas.addEventListener("touchend", function(event) {

        released();

        console.log("touchend");

     });

​

    canvas.addEventListener("touchmove", function(event) {

      event.preventDefault()

        currentPos = getTouchPos(canvas, event);

        console.log("touchmove");

        if (started) {

            drawLine(previousPos, currentPos);

            previousPos = currentPos;

        }

    });

​

    // Ajoute des écouteurs de click sur les divs contenant les couleurs

    var listeDivsCouleurs = document.querySelectorAll(".color");

​

    // On récupère une liste de Noeuds DOM, on va ajouter un écouteur sur chacun

    ajouteEcouteurSurDivCouleurs(listeDivsCouleurs);

};

​

/*  Cette fonction ajoute un écouteur de click sur chaque div permettant

    un choix de couleur. On écoute juste l'évenement "click" car un touchstart

    sur cet type d'objet génère aussi un évenement click. Donc qu'on soit

    sur touch screen ou qu'on utilise une souris, cela va fonctionner */

function ajouteEcouteurSurDivCouleurs(listeDivsCouleurs) {

    for(var i=0; i <  listeDivsCouleurs.length; i++) {

        var div = listeDivsCouleurs[i];

​

        // Pour chaque div on ajoute un écouteur 

        div.addEventListener("click", function() {

            // Pour récupérer la valeur d'une propriété CSS spécifiée dans

            // une feuille de style séparée, il faut une petite fonction

            var couleurChoisie = getStyle(this, "background-color");

​

            context.strokeStyle = couleurChoisie;

​

            console.log("Ecouteur sur div couleur selectionnée val =" + couleurChoisie);

        });

    }

}

​

// Piquée sur le web : http://www.quirksmode.org/dom/getstyles.html

function getStyle(el,styleProp)

{

    if (el.currentStyle)

        var y = el.currentStyle[styleProp];

    else if (window.getComputedStyle)

        var y = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);

    return y;

}

​

// Appelée par l input field type=color, si on passe this comme parametre

// dans le "oninput=changeCouleur(this)", pas la peine de faire un 

// getElementById ou un querySelector...

function changeCouleur(inputField) {

    var color = inputField.value;

    context.strokeStyle = color;

    console.log("on change la couleur pour " + color);

}

​

function changeEpaisseur() {

    var epaisseurTrait = document.querySelector("#selecteurEpaisseur").value;

    context.lineWidth = epaisseurTrait;

    console.log("on change l'apaisseur du trait pour " + epaisseurTrait);

}