Doodle on JS canvas

When drawing on the canvas object it seems straight forward to just plot the mouse coordinates to the canvas and all is good. This will result in jagged lines and not very smooth curves. Also the smoothness will depend heavily on the speed the mouse is moved at the time.

Using the 'quadraticCurveTo' will help a lot to create a smooth curve. Additionally to keep the performance up over time it is beneficial to draw to an offscreen canvas first before rendering the content to the main canvas and clearing the temp canvas when the 'Mouse Up' event occurs. Simple yet effective:

function getMouse( event )
{
    var rect = event.currentTarget.getBoundingClientRect();

    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
}

function onMouseMove( event )
{
    if( !_down )
    {
        return;
    }

    var pos = getMouse( event );

    _coords.push( pos );

    if( _coords.length < 3 )
    {
        return;
    }

    _tempContext.clearRect( 0, 0, _tempCanvas.width, _tempCanvas.height );
    _tempContext.beginPath();
    _tempContext.moveTo( _coords[ 0 ].x, _coords[ 0 ].y );

    var n = _coords.length - 2;
    var p0;
    var p1;

    for( var i = 1; i < n; ++i )
    {
        p0 = _coords[ i ];
        p1 = _coords[ i + 1 ];

        _tempContext.quadraticCurveTo( p0.x, p0.y, ( (p0.x + p1.x) * 0.5 ), ( (p0.y + p1.y) * 0.5 ) );
    }

    p0 = _coords[ i ];
    p1 = _coords[ i + 1 ];

    _tempContext.quadraticCurveTo( p0.x, p0.y, p1.x, p1.y );
    _tempContext.stroke();
}