drag test

by mmis1000

HTML

<div id='main_wrap'>
    <canvas id='main' width='450' height='600'></canvas>
    <br/>
    <input type='button' value='toggle' id='toggle'></input>
    <input type='button' value='play / pass' id='play'></input>
    <br/>
    <input type='button' value='tick' id='tick'></input>
    <input type='text' value='500' id='time'></input>
    <br/>render clock Id : <span id='renderId'>-</span>

    <br/>render calls : <span id='renderCall'>0</span>

    <br/>position : <span id='pos'>?</span>

</div>
<div id='loader_out' class='loader'></div>
<div id='loader_in' class='loader'>now loading...
    <br/><span id='current'>? / ?</span>

</div>

CSS

canvas {
    border:1px solid;
}
#main_wrap {
    margin:0 auto;
    text-align:center;
}
#loader_out {
    background:rgba(127, 127, 127, 0.8);
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}
#loader_in {
    position:fixed;
    bottom:50%;
    left:0px;
    right:0px;
    text-align:center;
    color:white;
}
input {
    width:100px;
}

JavaScript

function mouseEventFactory(handler, self) {
    function keyEvent(event) {
        var posX, posY, position, keynum, offset;
        /*if (window.event) {
            keynum = event.keyCode;
        } else */
        if (event.which) {
            keynum = event.which;
        } else {
            keynum = 0;
        }
        if (self) {
            offset = $(self).offset();
        } else {
            offset = $(this).offset();
        }
        if (offset) {
            posX = offset.left;
            posY = offset.top;
        } else {
            posX = 0;
            posY = 0;
        }
        position = {
            'x': event.pageX - posX,
                'y': event.pageY - posY
        };
        handler(keynum, position);
        return true;
    }
    return keyEvent;
}

function MouseTracer(element) {
    this.target = element;
    var SESSION_COUNTS_LIMIT = 30;
    var SESSION_LENGTH_LIMIT = 400;
    var self = this;
    this.mousePeriod = {};
    this.mousePeriodUp = [];
    this.mousePeriodDown = [];
    this.lastPosition = null;

    this.onMouseDownEvents = [function (key, tracer, period, pos) {}];
    this.onMouseUpEvents = [function (key, tracer, period, pos) {}];
    this.onMouseMoveEvents = [function (key, tracer, period, pos) {}];

    function callEach(arr, args, self) {
        var i;
        for (i = 0; i < arr.length; i++) {
            arr[i].apply(self, args);
        }
    }

    function objectToArray(obj) {
        var arr, name, val;
        arr = $.map(obj, function (value, index) {
            return [value];
        });
        //console.log(JSON.stringify(arr));
        return arr;
    }

    function limit(list, max) {
        if (list.length > max + 9) {
            list.splice(
            0,
            list.length - max + 1);
        }
        return list;
    }

    function initMousePeriod(mouseNum, position) {
        if (self.mousePeriod[mouseNum] === undefined || !self.mousePeriod[mouseNum].press) {
           ...