Canvas drawing with line smoothing

An experiment in smoothing out a line drawing in canvas using quadratic and bezier curves

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <title>Canvas Draw</title>
    </head>
    <body>
        <div id="coords">
            <div id="msg">Start drawing!</div>
            X: <span id="x"></span>
            Y: <span id="y"></span>
        </div>
        <div id="container">
            <canvas id="surface"></canvas>
        </div>
    </body>
</html>

CSS

* {
    -webkit-user-select:none;
}
body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
}
#msg {
    color:red;
    font-weight:bold;
}
#coords{ 
    background:#ffc; 
    border-bottom:1px solid #fc0;
}
#container {
    position:relative;
}
#surface {
    background:white;
}
.tp{
    visibility:hidden;
    position:absolute;
    width:30px;
    height:30px;
    background:#999;
    -webkit-border-radius:15px;
    -webkit-box-shadow:inset white 0 0 15px 5px, white 0 0 2px 2px;
}

JavaScript

var surface, ctx, target, inProgress, cp1x, cp1y, cp2x, cp2y, skip1, skip2;

function $(e) {
    return document.getElementById(e);
}

function draw(e) {
    var x = e.offsetX,
        y = e.offsetY;
    target.x.innerHTML = x;
    target.y.innerHTML = y;
    //ctx.globalCompositeOperation = 'source-over';
    ctx.shadowColor = "rgba(0,255,0,.5)";
    ctx.shadowBlur = 2;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'red';
    if (!inProgress) {
        ctx.beginPath();
        ctx.moveTo(x, y);
        inProgress = true;
        skip1 = true;
        skip2 = false;
    } else {
        if (skip1) {
            cp1x = x;
            cp1y = y;
            skip1 = false;
            skip2 = true;
        }
        if (skip2) {
            cp2x = x;
            cp2y = y;
            skip1 = false;
            skip2 = false;
        } else {
            //ctx.lineTo(x,y);
            ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
            //ctx.quadraticCurveTo(cp1x, cp1y, x, y);
            skip1 = true;
            skip2 = false;
        }
    }
    ctx.stroke();
}

function captureTouch() {
    surface.addEventListener('selectstart', function(e) {
        e.preventDefault();
        return false;
    }, false);
    surface.addEventListener('dragstart', function(e) {
        e.preventDefault();
        return false;
    }, false);
    surface.addEventListener('mousedown', function() {
        $('msg').style.setProperty('display','none');
        surface.addEventListener('mousemove', draw, false);
    }, false);
    surface.addEventListener('mouseup', function() {
        surface.removeEventListener('mousemove', draw, false);
        inProgress = false;
        ctx.save();
    }, false);
}

function init() {
    surface = $('surface');
    surface.width = document.body.clientWidth;
    surface.height = window.innerHeight;
    ctx = surface.getContext('2d');
    target = {
        x: $('x'),
        y:...