canvas_mouse__touchevents

var canvas = document.getElementById('paint');
var ctx = canvas.getContext('2d');

var sketch = document.getElementById('sketch');
var sketch_style = getComputedStyle(sketch);

/*canvas.width = 500;
canvas.height = 250;*/

// variable to track where the mouse is
var mouse = {x: 0, y: 0};

// Variable to track where the touch position
// is on the canvas
var touch = {x: 0, y:0};



// Drawing on Paint App
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = "black";

function getColor(colour){

    ctx.strokeStyle = colour;
}

function getSize(size){

    ctx.lineWidth = size;
}



// Get the touch position relative to the top-left of the canvas
// When we get the raw values of pageX and pageY below, they take into account the scrolling on the page
// but not the position relative to our target div. We'll adjust them using "target.offsetLeft" and
// "target.offsetTop" to get the correct values in relation to the top left of the canvas.
function getTouchPos(e) {

   if (!e)
     var e = event;

    if(e.touches) {
       if (e.touches.length == 1) {
            // Only deal with one finger

            // Get the information for finger #1
            var touchFig = e.touches[0];
            touch.x = touchFig.pageX - touchFig.target.offsetLeft;
            touch.y = touchFig.pageY - touchFig.target.offsetTop;
       }
     }
}


// Draw something when a touch start is detected
function sketchpad_touchStart() {

        // Update the touch x,y co-ordinates
        getTouchPos();

            //draw
          ctx.beginPath();
          ctx.moveTo(touch.x, touch.y);
          ctx.lineTo(touch.x, touch.y);
          ctx.stroke();

        // Prevents an additional mousedown event being triggered
        event.preventDefault();
}


// Draw something and prevent the default scrolling when touch movement is detected
function sketchpad_touchMove(e) {

        // Update the touch x,y co-ordinates
        getTouchPos(e);

        // During a touchmove event, unlike a mousemove event,
        // we don't need to check if the touch is engaged, since there
        // will always be contact with the screen by definition.
        ctx.beginPath();
          ctx.moveTo(touch.x, touch.y);
          ctx.lineTo(touch.x, touch.y);
          ctx.stroke();

        // Prevent a scrolling action as a result of this touchmove triggering.
        event.preventDefault();
}


//Event listeners for touch moves
// =================================

canvas.addEventListener('touchstart', sketchpad_touchStart, false);
canvas.addEventListener('touchmove', sketchpad_touchMove, false);



// Event listeners for mouse moves
// =================================

//event listener to calculate the position of the mouse tip
canvas.addEventListener('mousemove', function(e) {
    mouse.x = e.pageX - this.offsetLeft;
    mouse.y = e.pageY - this.offsetTop;
    }, false);


//event listener that listens to the event of holding
//the mouse down
canvas.addEventListener('mousedown', function(e) {

    ctx.beginPath();
    ctx.moveTo(mouse.x, mouse.y);
    canvas.addEventListener('mousemove', onPaint, false);

     }, false);

canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', onPaint, false);
}, false);

var onPaint = function() {
    ctx.lineTo(mouse.x, mouse.y);
    ctx.stroke();
};


var nPadLines = 12;

function createPadLines(nlines){

    console.log("Creating Pad lines");
    var c=document.getElementById("paint");
    var ctx=c.getContext("2d");
    var yHeight = 40;

    for(var line=0; line<nlines; ++line){

        ctx.beginPath();
        ctx.moveTo(0,line*yHeight);
        ctx.lineTo(900,line*yHeight);
        ctx.stroke();
    }
}

/*create the pad lines*/
createPadLines(nPadLines);