Плавная анимация холста

Я пытаюсь научиться создавать плавные анимации JavaScript с использованием холста HTML5. Почему-то анимация не плавная, а какая-то "забрызгиваемая".

Вы можете увидеть структуру, которую я построил на этот jsFiddle, который на данный момент использует только свойства Webkit.

Другой разработчик смог создать ту же концепцию, используя исходный код WebView, основанный на Ext.js. В учебных целях я хотел избежать использования каких-либо библиотек, чтобы лучше понять JavaScript. С концепцией WebViews можно ознакомиться по адресу этот jsFiddle, который показывает гораздо более плавную анимацию.

Я читал и пробовал всевозможные сценарии: от извлечения вызовов update из requestAnimationFrame в свой собственный цикл до перевода контекста в позицию отрисовки, отрисовки в контекст заднего буфера и копирования его в окно просмотра. Следующий код представляет мои лучшие усилия до сих пор.

Есть предложения по улучшению производительности, чтобы объект двигался плавно без дополнительных затрат на внешнюю библиотеку?

Заранее спасибо.

var app;
var now = then = delta = 0;
var viewport = document.createElement( 'canvas' );
var viewportContext = viewport.getContext( '2d' );

function App( )
{
    this.circle = {
        position : viewport.width / 2,
        radius : 10
    };
}

App.prototype.initialize = function( )
{
    app = this;
    document.body.appendChild( viewport );
    viewport.width = 320;
    viewport.height = 200;

    webkitRequestAnimationFrame( app.render, viewport );
};

App.prototype.render = function( )
{
    now = performance.webkitNow( );
    delta = ( now - then ) / 1000.0;
    then = now;

    app.update( delta );
    viewportContext.clearRect( 0, 0, viewport.width, viewport.height );
    app.draw( viewportContext );

    webkitRequestAnimationFrame( app.render, viewport );
};

App.prototype.draw = function( context )
{
    context.fillStyle = "white";
    context.beginPath( );
    context.arc( this.circle.position | 0, viewport.height / 2 | 0, this.circle.radius | 0, 0, Math.PI * 2, true );
    context.closePath( );
    context.fill( );
};

App.prototype.update = function( deltaTime )
{
    this.circle.position += viewport.width / 5 * deltaTime;

    if( this.circle.position >= viewport.width )
    {
        this.circle.position = 0;
    }
};

window.onload = function( )
{
    new App( ).initialize( );
};​