plugin

/*!
* Scribbly.js
* @author  Ayan_Dey
* @version 0.0.1
*/

(function (root, factory) {
    if ( typeof define === 'function' && define.amd ) {
        define([], factory(root));
    } else if ( typeof exports === 'object' ) {
        module.exports = factory(root);
    } else {
        root.Scribbly = factory(root);
    }
})(typeof global !== 'undefined' ? global : this.window || this.global, function (root) {

    'use strict';

    /**
     * Variables
     */
    var board,
        ctx,
        opts,
        isDrawing = false,
        mousePos = [];


    // Constructor
    function Scribbly(options) {

        // Default settings
        var defaults = {
            canvas: "",
            lineThickness: 2,
            lineColor: "#000000"
        };

        // extend config
        opts = extend(defaults, options || {} );

        // initialize plugin
        this.init();
    }


    /**
     *  Public Methods
     */

    Scribbly.prototype.init = function () {
        // Get the canvas ready to draw
        board = document.getElementById(opts.canvas);
        ctx = board.getContext("2d");

        // Add mouse event listeners to canvas element
        board.addEventListener("mousedown", press, false);
        board.addEventListener("mousemove", drag, false);
        board.addEventListener("mouseup", release);
        board.addEventListener("mouseout", cancel, false);

        // Add touch event listeners to canvas element
        board.addEventListener("touchstart", press, false);
        board.addEventListener("touchmove", drag, false);
        board.addEventListener("touchend", release, false);
        board.addEventListener("touchcancel", cancel, false);

    };

    // Clear the canvas
    Scribbly.prototype.clear = function() {
        ctx.clearRect(0, 0, board.width, board.height);
    };


    /**
     *  Private Methods
     */

    /**
     * Merge two or more objects. Returns a new object.
     */
    var extend = function () {

        // Variables
        var extended = {};
        var deep = false;
        var i = 0;
        var length = arguments.length;

        // Check if a deep merge
        if ( Object.prototype.toString.call( arguments[0] ) === '[object Boolean]' ) {
            deep = arguments[0];
            i++;
        }

        // Merge the object into the extended object
        var merge = function (obj) {
            for ( var prop in obj ) {
                if ( Object.prototype.hasOwnProperty.call( obj, prop ) ) {
                    // If deep merge and property is an object, merge properties
                    if ( deep && Object.prototype.toString.call(obj[prop]) === '[object Object]' ) {
                        extended[prop] = extend( true, extended[prop], obj[prop] );
                    } else {
                        extended[prop] = obj[prop];
                    }
                }
            }
        };

        // Loop through each object and conduct a merge
        for ( ; i < length; i++ ) {
            var obj = arguments[i];
            merge(obj);
        }

        return extended;

    };

    // Get the coordinates of the mouse click/ tap
    var getMousePos = function(evt) {
        var rect = board.getBoundingClientRect();
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };
    };

    // Mouse press/ touchstart event
    var press = function(e) {
        console.log('User clicked/tapped');
        isDrawing = true;
        mousePos.push([getMousePos(e).x, getMousePos(e).y]);
        draw();
    };

    // Mouse/ touch drag event
    var drag = function(e) {
        if(isDrawing) {
            console.log('User dragging');
           // mousePos.push([getMousePos(e).x, getMousePos(e).y]);
        }
    };

    // Mouse release/ touchend event
    var release = function(e) {
        console.log('User released click/touch');
        isDrawing = false;
    };

    // When mouse or touch goes out of the canvas
    var cancel = function(e) {
        console.log('Drawing cancelled');
        isDrawing = false;
    };

    var draw = function() {
        ctx.lineJoin = "round";
        ctx.lineWidth = opts.lineThickness;
        ctx.strokeStyle = opts.lineColor;

        for(var i=0; i<mousePos.length; i++) {
            ctx.beginPath();
            ctx.moveTo(mousePos[i][0], mousePos[i][1]);
            ctx.lineTo(mousePos[i][0], mousePos[i][1]);
            ctx.closePath();
            ctx.stroke();

            console.log(mousePos[i][0], mousePos[i][1]);
        }
    };


    /**
     * Public APIs
     */

    return Scribbly;

});