JS: canvasDrawer

more at: http://homepage.ntlworld.com/infinnerty/differences/mini-sketch/mini-sketch.html

by Nikolay Petrov

HTML

<canvas id="c" />

CSS

html,body{margin:0; padding:0}
canvas{display:block}

JavaScript

// get the canvas element and its context
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;

// create a drawer which tracks touch movements
var drawer = {
    isDrawing: false,
    touchstart: function (coors) {
        context.beginPath();
        context.moveTo(coors.x, coors.y);
        this.isDrawing = true;
    },
    mousedown: function (coors) {
        context.beginPath();
        context.moveTo(coors.x, coors.y);
        this.isDrawing = true;
    },
    touchmove: function (coors) {
        if (this.isDrawing) {
            context.lineTo(coors.x, coors.y);
            context.stroke();
        }
    },
    mousemove: function (coors) {
        if (this.isDrawing) {
            context.lineTo(coors.x, coors.y);
            context.stroke();
        }
    },
    touchend: function (coors) {
        if (this.isDrawing) {
            this.touchmove(coors);
            this.isDrawing = false;
        }
    },
    mouseup: function (coors) {
        if (this.isDrawing) {
            this.touchmove(coors);
            this.isDrawing = false;
        }
    }
};
// create a function to pass touch events and coordinates to drawer
function draw(event) {
    // get the touch coordinates
    var coors = (document.all) ? {
        x: event.x,
        y: event.y
    } : {
        x: event.touches ? event.targetTouches[0].pageX : event.pageX,
        y: event.touches ? event.targetTouches[0].pageY : event.pageY
    };
    // pass the coordinates to the appropriate handler
    drawer[event.type](coors);
}

// attach the touchstart, touchmove, touchend event listeners.
canvas.addEventListener('touchstart', draw, false);
canvas.addEventListener('touchmove', draw, false);
canvas.addEventListener('touchend', draw, false);
canvas.addEventListener('mousedown', draw, false);
canvas.addEventListener('mousemove', draw,...