$(document).ready(function(){
    $('a[href*=#]').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
            && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target
            || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target[0].offsetLeft - $target[0].parentNode.offsetLeft;
                $('#scrollarea')
                .animate({scrollLeft: targetOffset}, 1000);
                return false;
            }
        }
    });
    
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');    
    var height = canvas.height;
    var width = canvas.width;
    var gap = 5;
    
    ctx.fillStyle = "#ee0000";    
    ctx.fillRect (0, Math.round(height/3)*2, Math.round(width/3) - gap, Math.round(height/3));
    ctx.fillStyle = "#00ee00";    
    ctx.fillRect (Math.round(width/3) + gap, Math.round(height/3), Math.round(width/3) -gap, Math.round(height/3)*2);
    ctx.fillStyle = "#0000ee";    
    ctx.fillRect (Math.round(width/3)*2 + 2*gap, 0, Math.round(width/3) - gap, height);

    document.body.style.opacity = 1;
});