Dynadraw in Javascript

Use a simple dynamics model to create calligraphic strokes. Paul Haeberli - 1989 Javascript translation. Roger Allen - 2010 Inspiration to do this & JavaScript starting point. http://mrdoob.com/

by Roger Allen

HTML

<div id="info">
    <div id="menu"><b>Dynadraw</b>
        <p>by <a href="https://twitter.com/RogerAllen">Roger Allen</a>
            <br />based on
            <br /> <a href="http://www.graficaobscura.com/dyna/index.html" target="_blank">Dynadraw</a>
            <br/>by Paul Haeberli
            <br/>and <a href="http://mrdoob.com/">Scribbler by Mr.Doob</a>
        </p>
        <p>
            <input id="save" type="button" value="Save" />
            <br />
            <input id="clear" type="button" value="Clear" />
        </p>
    </div>
</div>
<div id="container"></div>

CSS

* {
    color: #000;
    font-family:Helvetica;
    font-size:12px;
}
body {
    background-color: #fff;
    margin: 0px;
    overflow: hidden;
}
hr {
    border: 0;
    background-color: #ddd;
    height: 1px;
}
#info {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 120px;
}
#menu {
    background-color: #ddd;
    padding: 5px;
    text-align: center;
}
input {
    width: 50%
}

JavaScript

//	dynadraw - http://www.graficaobscura.com/dyna/index.html
//
//	     Use a simple dynamics model to create calligraphic strokes.
//				Paul Haeberli - 1989
//                
//       Javascript translation.
//              Roger Allen - 2010
//              http://www.rogerandwendy.com/roger/dynadraw
//
//       Inspiration to do this & JavaScript starting point.
//              http://mrdoob.com/
//

// ADJUST THESE FOR DIFFERENT EFFECTS
var curmass     = 0.5;  // [0,1] 
var curdrag     = 0.35; // [0,1] 
var WIDTH       = 0.5;  // of the pen
var FIXED_ANGLE = 0;    // 1=fixed, 0=variable

var MIN_MASS = 1.0;
var MAX_MASS = 160.0;
var MIN_DRAG = 0.0;
var MAX_DRAG = 0.5;

var xsize = window.innerWidth;
var ysize = window.innerHeight;
var xyratio = xsize / ysize;
var mouse = new Filter();
var odelx, odely;
var container, canvas, context;
var save, clear;
var isMouseDown = false;

function Filter() {
    this.curx = 0.0;
    this.cury = 0.0;
    this.velx = 0.0;
    this.vely = 0.0;
    this.vel = 0.0;
    this.accx = 0.0;
    this.accy = 0.0;
    this.acc = 0.0;
    this.angx = 0.0;
    this.angy = 0.0;
    this.mass = 0.0;
    this.drag = 0.0;
    this.lastx = 0.0;
    this.lasty = 0.0;
    this.fixedangle = FIXED_ANGLE;
};
Filter.prototype.setpos = function (x, y) {
    this.curx = x;
    this.cury = y;
    this.lastx = x;
    this.lasty = y;
    this.velx = 0.0;
    this.vely = 0.0;
    this.accx = 0.0;
    this.accy = 0.0;
}
Filter.prototype.apply = function (mx, my) {
    var mass, drag;
    var fx, fy, force;

    /* calculate mass and drag */
    mass = flerp(MIN_MASS, MAX_MASS, curmass);
    drag = flerp(MIN_DRAG, MAX_DRAG, curdrag * curdrag);

    /* calculate force and acceleration */
    fx = mx - this.curx;
    fy = my - this.cury;
    this.acc = Math.sqrt(fx * fx + fy * fy);
    if (this.acc < 0.000001) return 0;
    this.accx = fx / mass;
    this.accy = fy / mass;

    /* calculate new velocity */
    this.velx += this.accx;
    this.vely +=...