Drawing Box demo (signature)

Just a signature / input box using rectangles to draw signatures, it is much better to use paths to perform these!

by drzaus

HTML

<strong>Signature</strong><br/>
<canvas id="signaturebox" width="300" height="120" border="1"></canvas><br/>
<input type="button" id="save" onclick="dl();" value="save" />
<input type="button" id="clear" onclick="clr();" value="clear" />
<input type="button" id="color" onclick="cycleColor();" value="cycle color" />
<label>Save As: <input type="text" id="filename" value="signature.png" /></label>
<br/>
<a href="http://www.codesign2.co.uk/canvasDemo">Want an Upgrade, with no gaps, support for images and undo - redo capacity with server-side validation? Good click here</a>

CSS

#signaturebox{
    border: 1px solid #666;
}

JavaScript

var DrawingBox = (function(dom, console) {
    // canvas helper: http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/#comment-1444615186
    var C = function(canvasSelector, context) {
            this.el = dom.querySelector(canvasSelector);
            this.ctx = this.el.getContext(context || '2d');
            this.size(this.el.width, this.el.height);
            return this;
    }, Cproto = {
        pathBegin: function(x,y) {
            this.ctx.beginPath();
            this.ctx.moveTo(x,y);
            return this;
        },
        pathEnd: function() {
            this.ctx.stroke();
            this.ctx.closePath();
            return this;
        },
        pathDraw: function(x,y) {
            this.ctx.lineTo(x,y);
            return this;
        },
        thickness: function(thickness) {
            this.ctx.lineWidth = thickness;
            return this;
        },
        color: function(color) {
            if(!color) return this.ctx.fillStyle;
            
            this.ctx.fillStyle = color || '#000';
            this.ctx.strokeStyle = this.ctx.fillStyle;
            return this;
        },
        fill: function(x,y,w,h,thicknessOffset) {
            if(typeof thicknessOffset === 'undefined') {
                this.ctx.fillRect(x,y,w,h);
                return this;
            }
            
            this.ctx.fillRect(x - this.ctx.lineWidth / 2, y - this.ctx.lineWidth / 2, w, h);
            return this;
        },
        clear: function() {
            this.ctx.clearRect(0,0,this.ctx.width, this.ctx.height);
            return this;
        },
        size: function(w,h) {
            // http://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5
            if(!w) return {w: this.ctx.width, h: this.ctx.height};
            
            this.ctx.width = w;
            this.ctx.height = h;
            
            // clear?
            
            return this;
        },
        zoom: function(factor) {
 ...