sketchpad.js

function Sketchpad(element) {
    var canvas, ctx, mouseX, mouseY, mouseDown=0, touchX, touchY, lastX=-1, lastY=-1;
    
    function drawLine(ctx, x, y, size) {
        if ( lastX == -1 ) {
            lastX=x;
            lastY=y;
        }
        
        r = 0; g = 0; b = 0; a = 255;
        
        ctx.strokeStyle = 'rgba('+r+','+g+','+b+','+(a/255)+')';
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(x, y);
        ctx.lineWidth = size;
        ctx.stroke();
        ctx.closePath();
        lastX = x;
        lastY = y;
    }
    
    function clearCanvas(canvas, ctx) {
        ctx.fillStyle = '#FFFFFF';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        //ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
    
    function sketchpad_mouseDown() {
        mouseDown = 1;
        drawLine( ctx, mouseX, mouseY, 12 );
    }
    
    function sketchpad_mouseUp() {
        mouseDown = 0;
        lastX = -1;
        lastY = -1;
    }
    
    function sketchpad_mouseMove(e) {
        getMousePos(e);
        
        if (mouseDown == 1) {
            drawLine( ctx, mouseX, mouseY, 12 );
        }
    }
    
    function getMousePos(e) {
        if ( !e ) {
            e = event;
        }
        
        if ( e.offsetX ) {
            mouseX = e.offsetX;
            mouseY = e.offsetY;
        } else if (e.layerX) {
            mouseX = e.layerX;
            mouseY = e.layerY;
        }
    }
    
    function sketchpad_touchStart() {
        getTouchPos();
        drawLine(ctx, touchX, touchY, 12 );
        event.preventDefault();
    }
    
    function sketchpad_touchEnd() {
        lastX = -1;
        lastY = -1;
    }
    
    function sketchpad_touchMove(e) {
        getTouchPos(e);
        drawLine(ctx, touchX, touchY, 12 );
        event.preventDefault();
    }
    
    function getTouchPos(e) {
        if ( !e ) {
            e = event;
        }
        
        if ( e.touches ) {
            if ( e.touches.length == 1 ) {
                var touch = e.touches[0];
                touchX = touch.pageX-touch.target.offsetLeft;
                touchY = touch.pageY-touch.target.offsetTop;
            }
        }
    }
    
    /*this.getContext = function() {
        return ctx;
    }
    
    this.getCanvas = function() {
        return canvas;
    }*/
    
    this.getDataURL = function() {
        return canvas.toDataURL();
    }
    
    this.clearTexture = function() {
        clearCanvas(canvas, ctx);
    }
    
    canvas = document.getElementById(element);
    if ( canvas.getContext ) {
        ctx = canvas.getContext('2d');
    }
    
    if (ctx) {
        canvas.addEventListener('mousedown', sketchpad_mouseDown, false);
        canvas.addEventListener('mousemove', sketchpad_mouseMove, false);
        canvas.addEventListener('mouseup', sketchpad_mouseUp, false);
        canvas.addEventListener('touchstart', sketchpad_touchStart, false);
        canvas.addEventListener('touchend', sketchpad_touchEnd, false);
        canvas.addEventListener('touchmove', sketchpad_touchMove, false);
        clearCanvas(canvas, ctx);
    }
}